Splitted Webpack configuration

- Webpack configuration was splitted into three parts - common, dev and
prod one, and merged with webpack-merge mergeWithRules
- purging is always enabled for TailwindCSS, which speeds up development
builds a lot

Author: high1

package.json

@@ -64,7 +64,8 @@
     "typescript": "^4.1.3",
     "webpack": "^5.12.2",
     "webpack-cli": "^4.3.1",
-    "webpack-dev-server": "^3.11.1"
+    "webpack-dev-server": "^3.11.1",
+    "webpack-merge": "^5.7.3"
   },
   "prettier": {
     "singleQuote": true

pnpm-lock.yaml

@@ -1,5 +1,8 @@
 module.exports = {
-  purge: ['src/**/*.html', 'src/**/*.tsx'],
+  purge: {
+    enabled: true,
+    content: ['src/**/*.{html,tsx}'],
+  },
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},

tailwind.config.js

@@ -1,25 +1,17 @@
-const { DefinePlugin, HotModuleReplacementPlugin } = require('webpack');
+const { DefinePlugin } = require('webpack');
 const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const TerserWebackPlugin = require('terser-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const ESLintPlugin = require('eslint-webpack-plugin');
+const { CustomizeRule, mergeWithRules } = require('webpack-merge');
 const { resolve } = require('path');
+const development = require('./webpack.dev');
+const production = require('./webpack.prod');
 
-module.exports = (_, { mode = 'none' }) => ({
+const common = (mode) => ({
   mode,
+  devtool: false,
   output: {
     path: resolve(process.cwd(), 'dist'),
   },
-  devtool: mode === 'development' ? 'inline-source-map' : false,
-  devServer: {
-    port: 3000,
-    hot: true,
-  },
-  target: mode === 'development' ? 'web' : 'browserslist',
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
     plugins: [new TsconfigPathsPlugin({})],
@@ -30,9 +22,6 @@ module.exports = (_, { mode = 'none' }) => ({
         test: /\.css$/,
         exclude: /node_modules/,
         use: [
-          {
-            loader: mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
-          },
           {
             loader: 'css-loader',
             options: {
@@ -43,11 +32,11 @@ module.exports = (_, { mode = 'none' }) => ({
         ],
       },
       {
-        test: /\.(png|jpe?g|gif|svg)$/i,
+        test: /\.(png|jpe?g|gif|svg)$/,
         type: 'asset/resource',
       },
       {
-        test: /\.tsx?$/i,
+        test: /\.tsx?$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
       },
@@ -60,41 +49,16 @@ module.exports = (_, { mode = 'none' }) => ({
     new DefinePlugin({
       __MODE__: JSON.stringify(mode),
     }),
-    ...(mode === 'development'
-      ? [new ForkTsCheckerWebpackPlugin(), new HotModuleReplacementPlugin()]
-      : [
-          new MiniCssExtractPlugin(),
-          new ESLintPlugin({
-            emitError: true,
-          }),
-          new CleanWebpackPlugin(),
-        ]),
   ],
-  optimization: {
-    minimizer: [
-      ...(mode === 'development' ? [] : [new TerserWebackPlugin(), new CssMinimizerPlugin()]),
-    ],
-    runtimeChunk: mode === 'development' ? undefined : 'single',
-    splitChunks:
-      mode === 'development'
-        ? false
-        : {
-            chunks: 'all',
-            maxInitialRequests: Infinity,
-            minSize: 0,
-            cacheGroups: {
-              vendor: {
-                test: /[\\/]node_modules[\\/]/,
-                name({ context }) {
-                  if (context) {
-                    const [, name] =
-                      /[\\/]node_modules(?:\\.pnpm)?[\\/](.*?)(?:[\\/]|$)/.exec(context) || [];
-                    return name.replace('@', '');
-                  }
-                  return null;
-                },
-              },
-            },
-          },
-  },
 });
+
+module.exports = (_, { mode = 'none' }) =>
+  mergeWithRules({
+    mode,
+    module: {
+      rules: {
+        test: CustomizeRule.Match,
+        use: CustomizeRule.Prepend,
+      },
+    },
+  })(common(mode), mode === 'production' ? production : development);

webpack.config.js

@@ -0,0 +1,27 @@
+const { EvalSourceMapDevToolPlugin, HotModuleReplacementPlugin } = require('webpack');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+  // devtool: 'inline-source-map',
+  devServer: {
+    port: 3000,
+    hot: true,
+  },
+  target: 'web',
+  plugins: [
+    new ForkTsCheckerWebpackPlugin(),
+    new HotModuleReplacementPlugin(),
+    new EvalSourceMapDevToolPlugin({
+      test: /\.(m?js|ts)x?$/,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: ['style-loader'],
+      },
+    ],
+  },
+};

webpack.dev.js

@@ -0,0 +1,47 @@
+const TerserWebackPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
+
+module.exports = {
+  // devtool: false,
+  target: 'browserslist',
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin(),
+    new ESLintPlugin({
+      emitError: true,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [new TerserWebackPlugin(), new CssMinimizerPlugin()],
+    runtimeChunk: 'single',
+    splitChunks: {
+      chunks: 'all',
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name({ context }) {
+            if (context) {
+              const [, name] =
+                /[\\/]node_modules(?:\\.pnpm)?[\\/](.*?)(?:[\\/]|$)/.exec(context) || [];
+              return name.replace('@', '');
+            }
+            return null;
+          },
+        },
+      },
+    },
+  },
+};