build: cleanup webpack config

package.json

@@ -47,11 +47,12 @@
     "source-map-loader": "^3.0.0",
     "webpack": "^5.39.1",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.8.0"
   },
   "scripts": {
-    "start": "webpack serve",
+    "start": "webpack serve --config webpack.dev.js",
-    "build": "webpack --mode=production",
+    "build": "webpack --config webpack.prod.js",
     "chrome": "cp manifest/chrome.json build/manifest.json",
     "firefox": "cp manifest/firefox.json build/manifest.json"
   },

webpack.common.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: path.resolve(__dirname, './src/index.js'),
+  performance: {
+    hints: false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: ''
+            },
+          },
+          'css-loader',
+          'sass-loader'
+        ],
+      },
+      {
+        test: /\.(woff|woff2|svg)$/,
+        type: 'asset/resource'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[chunkhash].css',
+      chunkFilename: '[id].[chunkhash].chunk.css'
+    }),
+  ]
+};

webpack.config.js

@@ -1,75 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  entry: path.resolve(__dirname, './src/index.js'),
-  mode: 'development',
-  performance: {
-    hints: false
-  },
-  module: {
-    rules: [{
-      test: /\.(js|jsx)$/,
-      exclude: /node_modules/,
-      use: ['babel-loader']
-    },
-    {
-      test: /\.(sa|sc|c)ss$/,
-      use: [
-        {
-          loader: MiniCssExtractPlugin.loader,
-          options: {
-            publicPath: ''
-          },
-        },
-        'css-loader',
-        'sass-loader'
-      ],
-    },
-    {
-      test: /\.(woff|woff2|svg)$/,
-      type: 'asset/resource'
-    },
-    {
-      test: /\.js$/,
-      enforce: 'pre',
-      use: ['source-map-loader']
-    }]
-  },
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  output: {
-    path: path.resolve(__dirname, './build'),
-    filename: '[name].[chunkhash].js',
-    chunkFilename: '[id].[chunkhash].chunk.js',
-    clean: true
-  },
-  devServer: {
-    contentBase: path.resolve(__dirname, './build'),
-    open: true,
-    port: 3000
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, './public/index.html')
-    }),
-    new CopyPlugin({
-      patterns: [{
-          from: 'public/icons',
-          to: 'icons'
-        },
-        {
-          from: 'public/offline-images',
-          to: 'offline-images'
-        }
-      ]
-    }),
-    new MiniCssExtractPlugin({
-      filename: '[name].[chunkhash].css',
-      chunkFilename: '[id].[chunkhash].chunk.css'
-    }),
-  ]
-};

webpack.dev.js

@@ -0,0 +1,21 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+
+module.exports = merge(common, {
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        enforce: 'pre',
+        use: ['source-map-loader']
+      }
+    ]
+  },
+  devServer: {
+    contentBase: path.resolve(__dirname, './build'),
+    open: true,
+    port: 3000
+  }
+});

webpack.prod.js

@@ -0,0 +1,31 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = merge(common, {
+  mode: 'production',
+  output: {
+    path: path.resolve(__dirname, './build'),
+    filename: '[name].[chunkhash].js',
+    chunkFilename: '[id].[chunkhash].chunk.js',
+    clean: true
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './public/index.html')
+    }),
+    new CopyPlugin({
+      patterns: [{
+          from: 'public/icons',
+          to: 'icons'
+        },
+        {
+          from: 'public/offline-images',
+          to: 'offline-images'
+        }
+      ]
+    })
+  ]
+});