Mastering Webpack: Advanced Configurations and Performance Optimizations for Frontend Projects

Key webpack configuration items

Learn how to define entry points for single‑page and multi‑page apps, configure output filenames with hashes, set publicPath , and specify the build directory.

Use HtmlWebpackPlugin to inject bundles into HTML files automatically, and understand when to apply the singleton option for CSS source maps.

Optimize module resolution with resolve.modules and resolve.alias to speed up path lookups.

Leverage module.noParse and targeted include / exclude patterns to skip unnecessary parsing of large libraries.

Enable caching for loaders and plugins: babel-loader with cacheDirectory, eslint-loader with cache, and cache-loader for CSS/SCSS processing.

Apply production‑level minification using TerserPlugin (multi‑process) and optimize-css-assets-webpack-plugin to remove dead code and compress CSS.

Implement advanced chunk splitting via splitChunks (all chunks, custom cache groups for vendor, React, Ant Design, etc.) to extract shared modules efficiently.

Use webpack-node-externals for server‑side bundles to exclude node_modules from the output.

Integrate hot module replacement for faster development cycles, and configure SSR hot debugging with webpack watch plus nodemon.

Adopt lodash‑webpack‑plugin for on‑demand lodash imports, and replace node-sass with Dart‑Sass for reliable Sass compilation.

Finally, consolidate all best‑practice settings into a reusable package (e.g., a8k) to share across projects.

module.exports = {
  entry: {
    vendor: "./src/vendor.js",
    polyfill: "./src/polyfill.js",
    index: "./src/index.js"
  },
  output: {
    filename: "[name].[hash].js",
    publicPath: "https://7.ur.cn/fudao/pc/",
    path: "./dist/"
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",
      minify: false
    })
  ],
  resolve: {
    modules: [
      path.resolve(__dirname, "src"),
      "node_modules"
    ],
    alias: {
      components: path.resolve(__dirname, "src/components")
    }
  },
  module: {
    noParse: /node_modules\/(moment|chart\.js)/,
    rules: [
      {
        test: /\.jsx?$/,
        use: "babel-loader",
        include: path.resolve(__dirname, "src"),
        exclude: /(_|\.)min\.js$/
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 10000,
      minChunks: 3,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          priority: 50,
          reuseExistingChunk: true
        },
        react: {
          test: /[\\/]node_modules[\\/](react|redux)/,
          name: "react",
          priority: 20,
          reuseExistingChunk: true
        },
        antd: {
          test: /[\\/]node_modules[\\/]antd/,
          name: "antd",
          priority: 15,
          reuseExistingChunk: true
        }
      }
    },
    minimizer: [
      new TerserPlugin({
        cache: path.resolve(__dirname, "cache", "terser-webpack-plugin"),
        parallel: true,
        sourceMap: true,
        terserOptions: {
          compress: { drop_console: true }
        }
      })
    ]
  }
};