Merge branch 'migration/webpack-merge' into develop

Author: iamWing

CHANGELOG_V4+.md

@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - `eslint-plugin-import` is now properly configured for both JavaScript and
     TypeScript files.
   - `jest.config.js` & `webpack.config.js` are no longer ignored by ESLint.
+- Improved the readability of `webpack.config.js` by migrating to `webpack-merge`
+  from using `lodash.deepClone()` for merging configuration objects.
 
 ### Fixed
 - Module import order warnings in most modules.
@@ -31,10 +33,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - `eslint-import-resolver-typescript` *- Better TypeScript support for ESLint
   `import` plugin*
+- `webpack-merge` *- Replaced the sections using `lodash.deepClone()` in
+  `webpack.config.js`*
 
 ### Removed
 - `eslint-import-resolver-webpack` *- Not being used in any part of the
   boilerplate*
+- `lodash` *- Replaced by `webpack-merge` for its' usage in `webpack.config.js`*
 
 ## [v4.0.0] - 2022-07-22
 ### Added

package-lock.json

@@ -77,14 +77,14 @@
     "electron-builder": "^23.1.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
-    "lodash": "^4.17.21",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.3.1",
     "tsconfig-paths": "^4.0.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.8.0"
   },
   "repository": {
     "type": "git",

package.json

@@ -1,8 +1,8 @@
 const path = require('path');
 const CopyPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const lodash = require('lodash');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { merge } = require('webpack-merge');
 
 function srcPaths(src) {
   return path.join(__dirname, src);
@@ -11,7 +11,6 @@ function srcPaths(src) {
 const isEnvProduction = process.env.NODE_ENV === 'production';
 const isEnvDevelopment = process.env.NODE_ENV === 'development';
 
-// #region Common settings
 const commonConfig = {
   devtool: isEnvDevelopment ? 'source-map' : false,
   mode: isEnvProduction ? 'production' : 'development',
@@ -45,51 +44,53 @@ const commonConfig = {
     ],
   },
 };
-// #endregion
 
-const mainConfig = lodash.cloneDeep(commonConfig);
-mainConfig.entry = './src/main/main.ts';
-mainConfig.target = 'electron-main';
-mainConfig.output.filename = 'main.bundle.js';
-mainConfig.plugins = [
-  new CopyPlugin({
-    patterns: [
-      {
-        from: 'package.json',
-        to: 'package.json',
-        transform: (content, _path) => {
-          const jsonContent = JSON.parse(content);
-          const electronVersion = jsonContent.devDependencies.electron;
+const mainConfig = merge(commonConfig, {
+  entry: './src/main/main.ts',
+  target: 'electron-main',
+  output: { filename: 'main.bundle.js' },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'package.json',
+          to: 'package.json',
+          transform: (content, _path) => {
+            const jsonContent = JSON.parse(content);
+            const electronVersion = jsonContent.devDependencies.electron;
 
-          delete jsonContent.devDependencies;
-          delete jsonContent.optionalDependencies;
-          delete jsonContent.scripts;
-          delete jsonContent.build;
+            delete jsonContent.devDependencies;
+            delete jsonContent.optionalDependencies;
+            delete jsonContent.scripts;
+            delete jsonContent.build;
 
-          jsonContent.main = './main.bundle.js';
-          jsonContent.scripts = { start: 'electron ./main.bundle.js' };
-          jsonContent.devDependencies = { electron: electronVersion };
+            jsonContent.main = './main.bundle.js';
+            jsonContent.scripts = { start: 'electron ./main.bundle.js' };
+            jsonContent.devDependencies = { electron: electronVersion };
 
-          return JSON.stringify(jsonContent, undefined, 2);
+            return JSON.stringify(jsonContent, undefined, 2);
+          },
         },
-      },
-    ],
-  }),
-];
+      ],
+    }),
+  ],
+});
 
-const preloadConfig = lodash.cloneDeep(commonConfig);
-preloadConfig.entry = './src/preload/preload.ts';
-preloadConfig.target = 'electron-preload';
-preloadConfig.output.filename = 'preload.bundle.js';
+const preloadConfig = merge(commonConfig, {
+  entry: './src/preload/preload.ts',
+  target: 'electron-preload',
+  output: { filename: 'preload.bundle.js' },
+});
 
-const rendererConfig = lodash.cloneDeep(commonConfig);
-rendererConfig.entry = './src/renderer/renderer.tsx';
-rendererConfig.target = 'electron-renderer';
-rendererConfig.output.filename = 'renderer.bundle.js';
-rendererConfig.plugins = [
-  new HtmlWebpackPlugin({
-    template: path.resolve(__dirname, './public/index.html'),
-  }),
-];
+const rendererConfig = merge(commonConfig, {
+  entry: './src/renderer/renderer.tsx',
+  target: 'electron-renderer',
+  output: { filename: 'renderer.bundle.js' },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './public/index.html'),
+    }),
+  ],
+});
 
 module.exports = [mainConfig, preloadConfig, rendererConfig];