chore: webpack dev 파일 생성

Author: devkimc

webpack.config.js config/webpack.common.jswebpack.config.js renamed to config/webpack.common.js

@@ -1,43 +1,44 @@
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require("path");
 const webpack = require("webpack");
-const prod = process.env.NODE_ENV === "production";
+// const prod = process.env.NODE_ENV === "production";
 
 module.exports = {
-  mode: prod ? "production" : "development",
-  devtool: prod ? "hidden-source-map" : "eval",
-
+  // mode: prod ? "production" : "development",
+  // devtool: prod ? "hidden-source-map" : "eval",
   entry: "./src/index.tsx",
-  output: {
-    path: path.join(__dirname, "dist"),
-    filename: "bundle.js",
-  },
 
-  resolve: {
-    extensions: [".js", ".jsx", ".ts", ".tsx"],
-  },
+  // devServer: {
+  //   historyApiFallback: true,
+  //   port: 3000,
+  //   hot: true,
+  // },
 
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: ["babel-loader", "ts-loader"],
+        use: ["babel-loader"],
+        exclude: /node_modules/,
       },
     ],
   },
 
-  devServer: {
-    historyApiFallback: true,
-    port: 3000,
-    hot: true,
-  },
-
   plugins: [
+    new HtmlWebpackPlugin({
+      template: "public/index.html",
+    }),
     new webpack.ProvidePlugin({
       React: "react",
     }),
-    new HtmlWebpackPlugin({
-      template: "./src/index.html",
-    }),
   ],
+
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".json"],
+  },
+
+  output: {
+    filename: "bundle.js",
+    path: path.join(__dirname, "dist"),
+  },
 };

config/webpack.dev.js

@@ -0,0 +1,28 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common");
+
+module.exports = merge(common, {
+  mode: "development",
+  devtools: "inline-source-map",
+  devServer: {
+    open: false,
+    hot: true,
+    compress: true,
+    port: 3000,
+    historyApiFallback: true,
+    liveReload: true,
+  },
+  output: {
+    filename: "[name].[contenthash].js",
+    publicPath: "/",
+  },
+  // styled-component 를 사용하므로 주석
+  //   module: {
+  //     rules: [
+  //       {
+  //         test: /\.(sa|sc|c)ss$/i,
+  //         use: ["style-loader", "css-loader", "sass-loader"],
+  //       },
+  //     ],
+  //   },
+});

package-lock.json

@@ -33,7 +33,6 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
-    "ts-loader": "^9.4.1",
     "typescript": "^4.8.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",