Split webpack configuration to development and production.

Props/Props.csproj

@@ -54,7 +54,7 @@
 
   <!-- Build static resources -->
   <Target Name="BuildWebpack" BeforeTargets="Build">
-    <Exec Command="npm run build -- --mode=development" Condition=" '$(Configuration)' == 'Debug' " LogStandardErrorAsError="true" />
-    <Exec Command="npm run build -- --mode=production" Condition=" '$(Configuration)' == 'Release' " LogStandardErrorAsError="true" />
+    <Exec Command="npm run build:dev" Condition=" '$(Configuration)' == 'Debug' " LogStandardErrorAsError="true" />
+    <Exec Command="npm run build:prod" Condition=" '$(Configuration)' == 'Release' " LogStandardErrorAsError="true" />
   </Target>
 </Project>

Props/assets/scss/main.scss

@@ -1,6 +1,6 @@
 @use "themer";
-@use "~/node_modules/bootstrap/scss/bootstrap";
 @use "sass:color";
+@use "~/node_modules/bootstrap/scss/bootstrap";
 
 header > nav {
     @extend .navbar-expand-lg;

Props/package-lock.json

@@ -67,6 +67,7 @@
       "version": "7.14.7",
       "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.14.7.tgz",
       "integrity": "sha512-6WPwZqO5priAGIwV6msJcdc9TsEPzYeYdS/Xuoap+/ihkgN6dzHp2bcAAwyWZ5bLzk0vvjDmKvRwkqNaiJ8BiQ==",
+      "dev": true,
       "requires": {
         "eslint-scope": "^5.1.1",
         "eslint-visitor-keys": "^2.1.0",
@@ -76,7 +77,8 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         }
       }
     },
@@ -2174,6 +2176,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
       "requires": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -2199,7 +2202,8 @@
     "eslint-visitor-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true
     },
     "espree": {
       "version": "7.3.1",
@@ -2253,6 +2257,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
       "requires": {
         "estraverse": "^5.2.0"
       },
@@ -2260,14 +2265,16 @@
         "estraverse": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ=="
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
         }
       }
     },
     "estraverse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true
     },
     "esutils": {
       "version": "2.0.3",

Props/package.json

@@ -2,13 +2,16 @@
   "private": true,
   "main": "js/index.js",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack --config webpack.common.js",
+    "build:dev": "webpack --config webpack.dev.js",
+    "build:prod": "webpack --config webpack.prod.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.14.8",
+    "@babel/eslint-parser": "^7.14.7",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "babel-eslint": "^10.1.0",
@@ -21,10 +24,10 @@
     "sass-loader": "^12.1.0",
     "style-loader": "^3.1.0",
     "webpack": "^5.45.1",
-    "webpack-cli": "^4.7.2"
+    "webpack-cli": "^4.7.2",
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@babel/eslint-parser": "^7.14.7",
     "@babel/runtime": "^7.14.8",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.2",

Props/webpack.common.js

@@ -58,16 +58,4 @@ let config = {
     ]
 };
 
-module.exports = (env, argv) => {
-    if (argv.mode === "development") {
-        // Development specific configuration.
-        config.devtool = "eval-source-map";
-    }
-
-    if (argv.mode === "production") {
-        // Production specific configuration.
-        config.devtool = "nosources-source-map";
-    }
-
-    return config;
-};
+module.exports = config;

Props/webpack.dev.js

@@ -0,0 +1,9 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common");
+
+let config = {
+    mode: "development",
+    devtool: "eval-source-map",
+};
+
+module.exports = merge(common, config);

Props/webpack.prod.js

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