update(webpack): 중복 처리

HTMLhead · Jul 9, 2019 · aebe672 · aebe672
1 parent 0138970
commit aebe672
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 93 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/webpack.common.js b/webpack.common.js
@@ -0,0 +1,31 @@
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+module.exports = {
+  mode: "production",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js",
+    publicPath: "/",
+    libraryTarget: "umd",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
+      {
+        test: /\.(sass|scss)$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+    }),
+  ],
+};
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -0,0 +1,3 @@
+module.exports = {
+  mode: 'development'
+}
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,90 +1,33 @@
-const path = require('path');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const TerserJSPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-module.exports = [{
-  mode: 'production',
-  entry: {
-    "listUi.min": [path.resolve(__dirname, 'src/js/listUi.js'), "./src/assets/sass/main.scss"]
-  },
-  // 빌드한 파일이 저장되는 곳
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js',
-    publicPath: '/',
-    libraryTarget: "umd",
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /(node_modules)/, // 모듈폴더제외
-        use: {
-          loader: 'babel-loader',
-        }
-      },
-      {
-        test: /\.(sass|scss)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          "css-loader",
-          "sass-loader"
-        ]
-      }
-    ]
-  },
-  plugins: [
-    // MiniCssExtractPlugin 플러그인 설정
-    // [name]은 entry에서 설정한 "listUi"를 의미
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    })
-  ],
-  optimization: {
-    minimizer: [
-      new TerserJSPlugin({}),
-      new OptimizeCSSAssetsPlugin({}),
-    ]
-  }
-},{
-  mode: 'production',
-  entry: {
-    "listUi": [path.resolve(__dirname, 'src/js/listUi.js'),"./src/assets/sass/main.scss"],
-  },
-  // 빌드한 파일이 저장되는 곳
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js',
-    publicPath: '/',
-    libraryTarget: "umd",
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /(node_modules)/, // 모듈폴더제외
-        use: {
-          loader: 'babel-loader',
-        }
-      },
-      {
-        test: /\.(sass|scss)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          "css-loader",
-          "sass-loader"
-        ]
-      }
-    ]
-  },
-  plugins: [
-    // MiniCssExtractPlugin 플러그인 설정
-    // [name]은 entry에서 설정한 "listUi"를 의미
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    })
-  ],
-  optimization: {
-    minimize: false,
-  }
-}]
+const path = require("path");
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const TerserJSPlugin = require("terser-webpack-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+
+module.exports = [
+  merge(common, {
+    entry: {
+      listUi: [
+        path.resolve(__dirname, "src/js/listUi.js"),
+        "./src/assets/sass/main.scss",
+      ],
+    },
+    // 웹팩 빌드를 시작할 때 dist폴더를 비우도록 설정
+    plugins: [new CleanWebpackPlugin()],
+    optimization: {
+      minimize: false,
+    },
+  }),
+  merge(common, {
+    entry: {
+      "listUi.min": [
+        path.resolve(__dirname, "src/js/listUi.js"),
+        "./src/assets/sass/main.scss",
+      ],
+    },
+    optimization: {
+      minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+    },
+  }),
+];