✨ :: webpack-merge 추가, 🔥 yarn.lock 삭제

package.json

@@ -32,9 +32,9 @@
     "web-vitals": "^2.1.0"
   },
   "scripts": {
-    "start": "webpack serve --mode development",
+    "start": "webpack serve --config webpack.dev.js --progress",
     "prebuild": "rimraf dist",
-    "build": "webpack --progress --mode production",
+    "build": "webpack --config webpack.prod.js --progress",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "dev": "webpack serve --env development"
@@ -71,6 +71,7 @@
     "typescript": "^5.1.6",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
   }
 }

webpack.config.js → webpack.common.js

@@ -4,21 +4,14 @@ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
 module.exports = {
-  mode: "development",
   entry: {
     main: path.resolve("./src/index.tsx"),
   },
-  devtool: "inline-source-map",
   output: {
     path: path.resolve(__dirname, "dist/"),
     filename: "index.js",
     publicPath: "/",
   },
-  devServer: {
-    port: 3000,
-    hot: true,
-    historyApiFallback: true,
-  },
   module: {
     rules: [
       {

webpack.dev.js

@@ -0,0 +1,12 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  mode: "development",
+  devtool: "inline-source-map",
+  devServer: {
+    port: 3000,
+    hot: true,
+    historyApiFallback: true,
+  },
+});

webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  mode: "production",
+  devtool: "hidden-source-map",
+});