webpack: split configs into prod/dev

.eslintrc.yml

@@ -1,6 +1,7 @@
 env:
   browser: true
   es2021: true
+  node: true
 extends: eslint:recommended
 overrides: []
 parserOptions:

package-lock.json

@@ -16,7 +16,8 @@
         "style-loader": "^3.3.1",
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1",
-        "webpack-dev-server": "^4.11.1"
+        "webpack-dev-server": "^4.11.1",
+        "webpack-merge": "^5.8.0"
       }
     },
     "node_modules/@discoveryjs/json-ext": {

package.json

@@ -5,9 +5,9 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack",
+    "build": "webpack --config webpack.prod.js",
-    "lint": "eslint --ext .js,.jsx src",
+    "lint": "eslint --ext .js,.jsx src *.js",
-    "start": "webpack serve --open"
+    "start": "webpack serve --open --config webpack.dev.js"
   },
   "repository": {
     "type": "git",
@@ -40,6 +40,7 @@
     "style-loader": "^3.3.1",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
   }
 }

webpack.common.js

@@ -1,19 +1,14 @@
-const path = require('path');
+const path = require("path");
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const pages = ["index", "aes"];
 
 module.exports = {
-	mode: 'development',
 	entry: pages.reduce((config, page) => {
 		config[page] = `./src/${page}.js`;
 		return config;
 	}, {}),
-	devtool: 'inline-source-map',
-	devServer: {
-		static: './dist',
-	},
 	output: {
 		filename: "[name].js",
 		path: path.resolve(__dirname, "dist"),
@@ -30,21 +25,21 @@ module.exports = {
 			chunkFilename: "[id].[contenthash].css",
 		}),
 	].concat(
-	pages.map(
+		pages.map(
-		(page) =>
+			(page) =>
-			new HtmlWebpackPlugin({
+				new HtmlWebpackPlugin({
-				inject: true,
+					inject: true,
-				template: `./src/pages/${page}.html`,
+					template: `./src/pages/${page}.html`,
-				filename: `${page}.html`,
+					filename: `${page}.html`,
-				chunks: [page],
+					chunks: [page],
-			})
+				})
 		)
 	),
 	module: {
 		rules: [
 			{
 				test: /\.css$/i,
-				use: [MiniCssExtractPlugin.loader, 'css-loader'],
+				use: [MiniCssExtractPlugin.loader, "css-loader"],
 			},
 		],
 	},

webpack.dev.js

@@ -0,0 +1,10 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+	mode: "development",
+	devtool: "inline-source-map",
+	devServer: {
+		static: "./dist",
+	},
+});

webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+	mode: "production",
+	devtool: "source-map",
+});