chore: ts-loader를 이용하기 위한 webpack.local.js 추가

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.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,
+				},
 			},
 		],
 	},
@@ -25,7 +32,4 @@ module.exports = merge(common, {
 			'process.env': JSON.stringify(process.env),
 		}),
 	],
-	optimization: {
-		minimize: true,
-	},
 });

frontend/webpack/webpack.local.js

@@ -0,0 +1,36 @@
+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: 'ts-loader',
+				exclude: /node_modules/,
+				options: {
+					transpileOnly: true,
+				},
+			},
+		],
+	},
+	plugins: [
+		new ForkTsCheckerWebpackPlugin(),
+		new webpack.DefinePlugin({
+			'process.env': JSON.stringify(process.env),
+		}),
+	],
+	optimization: {
+		minimize: true,
+	},
+});

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,
+				},
 			},
 		],
 	},