feat(webpack): improve import logic

template/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "description": "",
   "scripts": {
-    "dev": "webpack serve --mode development --config webpack.common.ts",
-    "build": "webpack --mode production --config webpack.common.ts",
+    "dev": "webpack serve --mode development --config webpack.dev.ts",
+    "build": "webpack --mode production --config webpack.prod.ts",
     "prepare": "husky install"
   },
   "repository": {

template/webpack.common.ts

@@ -1,6 +1,5 @@
 import path from 'path';
 import webpack from 'webpack';
-import { merge } from 'webpack-merge';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WebpackBarPlugin from 'webpackbar';
@@ -65,16 +64,4 @@ const commonConfig: webpack.Configuration = {
   stats: 'errors-only',
 };
 
-module.exports = async (
-  _: Record<string, string>,
-  args: Record<string, string>,
-) => {
-  switch (args.mode) {
-    case 'development':
-      return merge(commonConfig, (await import('./webpack.dev')).default);
-    case 'production':
-      return merge(commonConfig, (await import('./webpack.prod')).default);
-    default:
-      throw new Error('No matching configuration was found!');
-  }
-};
+export default commonConfig;

template/webpack.dev.ts

@@ -1,7 +1,9 @@
 import path from 'path';
 import webpack from 'webpack';
+import { merge } from 'webpack-merge';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+import commonConfig from './webpack.common';
 
 const devConfig: webpack.Configuration = {
   mode: 'development',
@@ -40,4 +42,4 @@ const devConfig: webpack.Configuration = {
   },
 };
 
-export default devConfig;
+export default merge(commonConfig, devConfig);

template/webpack.prod.ts

@@ -1,12 +1,14 @@
 import path from 'path';
 import fs from 'fs-extra';
 import webpack from 'webpack';
+import { merge } from 'webpack-merge';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import SizePlugin from 'size-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import { green, cyan } from 'chalk';
+import commonConfig from './webpack.common';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const packageJson = require('./package.json');
@@ -108,4 +110,4 @@ const prodConfig: webpack.Configuration = {
   devtool: 'source-map',
 };
 
-export default prodConfig;
+export default merge(commonConfig, prodConfig);