chore: webpack dev 환경 분리

Author: devkimc

config/webpack.common.js

@@ -1,19 +1,10 @@
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require("path");
 const webpack = require("webpack");
-// const prod = process.env.NODE_ENV === "production";
 
 module.exports = {
-  // mode: prod ? "production" : "development",
-  // devtool: prod ? "hidden-source-map" : "eval",
   entry: "./src/index.tsx",
 
-  // devServer: {
-  //   historyApiFallback: true,
-  //   port: 3000,
-  //   hot: true,
-  // },
-
   module: {
     rules: [
       {

config/webpack.dev.js

@@ -3,19 +3,19 @@ const common = require("./webpack.common");
 
 module.exports = merge(common, {
   mode: "development",
-  devtools: "inline-source-map",
+  devtool: "inline-source-map",
   devServer: {
-    open: false,
+    open: true,
     hot: true,
     compress: true,
     port: 3000,
     historyApiFallback: true,
     liveReload: true,
   },
-  output: {
-    filename: "[name].[contenthash].js",
-    publicPath: "/",
-  },
+  //   output: {
+  //     filename: "bundle.js",
+  //     publicPath: "/",
+  //   },
   // styled-component 를 사용하므로 주석
   //   module: {
   //     rules: [

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.tsx",
   "scripts": {
-    "dev": "webpack serve --mode development --open --hot",
+    "dev": "webpack-dev-server --config config/webpack.dev.js",
     "build": "webpack --mode production",
     "prestart": "npm build",
     "start": "webpack --mode development"