webpack을 local, dev, prod로 분리한다.

frontend/package.json

@@ -26,7 +26,7 @@
 		"ts-jest": "^28.0.7"
 	},
 	"scripts": {
-		"start": "webpack serve --open --config webpack/webpack.dev.js",
+		"start": "webpack serve --open --config webpack/webpack.local.js",
 		"build": "webpack --mode=production --config webpack/webpack.prod.js",
 		"build-dev": "webpack --mode=production --config webpack/webpack.dev.js",
 		"storybook": "start-storybook -p 6006",

frontend/webpack/webpack.common.js

@@ -8,14 +8,15 @@ module.exports = {
 		path: path.join(__dirname, '../dist'),
 		filename: '[name].[contenthash].js',
 		publicPath: '/',
-		clean: true,
+		pathinfo: false,
 	},
 	resolve: {
 		alias: {
 			'@': path.resolve(__dirname, '/src'),
 		},
 		modules: ['node_modules'],
 		extensions: ['.js', '.jsx', '.ts', '.tsx'],
+		symlinks: false,
 	},
 	devServer: {
 		historyApiFallback: true,
@@ -45,4 +46,9 @@ module.exports = {
 		}),
 		new CleanWebpackPlugin(),
 	],
+	optimization: {
+		runtimeChunk: {
+			name: (entrypoint) => `runtime-${entrypoint.name}`,
+		},
+	},
 };

frontend/webpack/webpack.dev.js

@@ -9,14 +9,21 @@ dotenv.config({
 });
 
 module.exports = merge(common, {
-	mode: 'development',
-	devtool: 'eval-cheap-module-source-map',
+	mode: 'production',
+	devtool: false,
+	cache: {
+		type: 'filesystem',
+	},
 	module: {
 		rules: [
 			{
 				test: /\.(js|jsx|ts|tsx)?$/,
 				loader: 'babel-loader',
 				exclude: /node_modules/,
+				options: {
+					cacheCompression: false,
+					cacheDirectory: true,
+				},
 			},
 		],
 	},
@@ -26,6 +33,6 @@ module.exports = merge(common, {
 		}),
 	],
 	optimization: {
-		minimize: true,
+		minimize: false,
 	},
 });

frontend/webpack/webpack.local.js

@@ -0,0 +1,34 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+const path = require('path');
+const webpack = require('webpack');
+const dotenv = require('dotenv');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+dotenv.config({
+	path: path.join(__dirname, './.env.development'),
+});
+
+module.exports = merge(common, {
+	mode: 'development',
+	devtool: 'eval-cheap-module-source-map',
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx|ts|tsx)?$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/,
+				options: {
+					cacheCompression: false,
+					cacheDirectory: true,
+				},
+			},
+		],
+	},
+	plugins: [
+		new ForkTsCheckerWebpackPlugin(),
+		new webpack.DefinePlugin({
+			'process.env': JSON.stringify(process.env),
+		}),
+	],
+});

frontend/webpack/webpack.prod.js

@@ -10,12 +10,19 @@ dotenv.config({
 
 module.exports = merge(common, {
 	mode: 'production',
+	cache: {
+		type: 'filesystem',
+	},
 	module: {
 		rules: [
 			{
 				test: /\.(js|jsx|ts|tsx)?$/,
 				loader: 'babel-loader',
 				exclude: /node_modules/,
+				options: {
+					cacheCompression: false,
+					cacheDirectory: true,
+				},
 			},
 		],
 	},