[FE] 빌드 환경 prod와 dev로 구분

client/.gitignore

@@ -5,7 +5,7 @@ npm-debug.log*
 node_modules
 dist
 
-.env
+.env.*
 
 *storybook.log
 .DS_Store

client/package.json

@@ -4,8 +4,10 @@
   "description": "",
   "type": "module",
   "scripts": {
-    "start": "webpack serve ",
-    "build": "webpack --mode production",
+    "prod": "NODE_ENV=production webpack server --open --config webpack.prod.mjs",
+    "dev": "NODE_ENV=development webpack server --open --config webpack.dev.mjs",
+    "build": "NODE_ENV=production webpack --config webpack.prod.mjs",
+    "build-dev": "NODE_ENV=development webpack --config webpack.dev.mjs",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
   },
@@ -54,4 +56,4 @@
     "npm": ">=10.7.0",
     "node": ">=20.15.1"
   }
-}
+}

client/webpack.config.js → client/webpack.common.mjs

@@ -3,15 +3,11 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import {ModifySourcePlugin, ConcatOperation} from 'modify-source-webpack-plugin';
 import {fileURLToPath} from 'url';
-import Dotenv from 'dotenv-webpack';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-// dotenv.config({path: path.join(__dirname, '.env')});
-
 export default {
-  mode: 'development',
   entry: './src/index.tsx',
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
@@ -26,11 +22,6 @@ export default {
       '@utils': path.resolve(__dirname, 'src/utils/'),
     },
   },
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'bundle.min.js',
-    publicPath: '/',
-  },
   module: {
     rules: [
       {
@@ -61,11 +52,5 @@ export default {
         },
       ],
     }),
-    new Dotenv(),
   ],
-  devServer: {
-    port: 3000,
-    hot: true,
-    historyApiFallback: true,
-  },
 };

client/webpack.dev.mjs

@@ -0,0 +1,30 @@
+import path from 'path';
+import {merge} from 'webpack-merge';
+import Dotenv from 'dotenv-webpack';
+import common from './webpack.common.mjs';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default merge(common, {
+  mode: 'development',
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    publicPath: '/',
+  },
+  devtool: 'eval-source-map',
+  devServer: {
+    port: 3000,
+    historyApiFallback: true,
+    hot: true,
+  },
+  plugins: [
+    new Dotenv({
+      path: '.env.dev',
+    }),
+  ],
+});

client/webpack.prod.mjs

@@ -0,0 +1,25 @@
+import path from 'path';
+import {merge} from 'webpack-merge';
+import Dotenv from 'dotenv-webpack';
+import common from './webpack.common.mjs';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default merge(common, {
+  mode: 'production',
+  output: {
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    publicPath: '/',
+  },
+  devtool: 'source-map',
+  plugins: [
+    new Dotenv({
+      path: '.env.prod',
+    }),
+  ],
+});