production webpack file

package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack serve --mode=development",
+    "start": "webpack serve --open --config webpack.dev.js",
-    "build": "webpack --mode=production"
+    "build": "webpack --config webpack.prod.js"
   },
   "keywords": [],
   "author": "",
@@ -13,10 +13,10 @@
   "devDependencies": {
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^5.2.5",
-    "css-minimizer-webpack-plugin": "^3.0.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "^1.6.0",
+    "mini-css-extract-plugin": "^2.2.0",
     "moment": "^2.29.1",
     "sortablejs": "^1.13.0",
     "style-loader": "^2.0.0",
@@ -24,6 +24,7 @@
     "webpack": "^5.37.1",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.8.0",
     "zip-webpack-plugin": "^4.0.1"
   }
 }

webpack.common.js

@@ -1,12 +1,6 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
-const ZipPlugin = require('zip-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-
-const version = require('./src/manifest.json').version;
-const name = require('./src/manifest.json').name;
 
 module.exports = {
   entry: {
@@ -17,15 +11,10 @@ module.exports = {
     path: path.resolve(__dirname, 'dist/web'),
     clean: true
   },
-  devServer: {
-    port: 5000,
-    watchContentBase: true
-  },
   module: {
     rules: [{
       test: /\.css$/i,
       use: ['style-loader', 'css-loader']
-      // use: [MiniCssExtractPlugin.loader, 'css-loader']
     }, {
       test: /\.(ttf|woff|woff2)$/,
       use: {
@@ -42,18 +31,7 @@ module.exports = {
       }]
     }]
   },
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new CssMinimizerPlugin({
-        minify: CssMinimizerPlugin.cleanCssMinify
-      })
-    ]
-  },
   plugins: [
-    // new MiniCssExtractPlugin({
-    //   filename: '[name].[contenthash].css'
-    // }),
     new HtmlWebpackPlugin({
       template: './src/index.html'
     }),
@@ -68,10 +46,6 @@ module.exports = {
         from: './src/initialBackground.js',
         to: './initialBackground.js'
       }]
-    }),
-    new ZipPlugin({
-      path: path.resolve(__dirname, 'dist/extension'),
-      filename: name + '_' + version + '.zip'
     })
   ]
 };

webpack.dev.js

@@ -0,0 +1,11 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    port: 5000,
+    watchContentBase: true
+  }
+});

webpack.prod.js

@@ -0,0 +1,34 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+const ZipPlugin = require('zip-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const version = require('./src/manifest.json').version;
+const name = require('./src/manifest.json').name;
+
+module.exports = merge(common, {
+  mode: 'production',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin({
+        minify: CssMinimizerPlugin.cleanCssMinify
+      })
+    ]
+  },
+  module: {
+    rules: [{
+      test: /\.css$/i,
+      use: [MiniCssExtractPlugin.loader, 'css-loader'],
+    }],
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new ZipPlugin({
+      path: path.resolve(__dirname, 'dist/extension'),
+      filename: name + '_' + version + '.zip'
+    })
+  ]
+});