Evolution of Frontend Build Tools and Webpack Optimization Practices

Introduction – The article reviews the evolution of frontend build tools from Grunt (2015‑2016) to Gulp and finally to Webpack. It explains how pipeline‑style tools replaced task runners, how Webpack introduced a module‑based pre‑compilation approach, and why Webpack has become the dominant build tool according to the State of JavaScript 2019 survey.

File Structure – Webpack 4.x split the CLI into a separate webpack-cli package. The author describes the different configuration files ( webpack.common.js, webpack.dev.js, webpack.prod.js) and the distinct strategies for development (debug, source‑maps, HMR, proxy) and production (minification, chunk splitting, lightweight source‑maps, custom asset handling).

Basic / Custom Configuration

CommonsChunkPlugin has been replaced by optimization.splitChunks.

Cache groups must be defined carefully to avoid redundant files.

OccurrenceOrderPlugin is now accessed via new webpack.optimize.OccurrenceOrderPlugin().

The built‑in minimizer switched from UglifyJS to terser; the author uses terser-webpack-plugin.

Newer Webpack versions require absolute paths or RegExp for module.rules.exclude.

Aliases are recommended to replace deep relative paths, improving IDE navigation (WebStorm, VSCode).

Large images should be uploaded to a CDN to reduce bundle size.

devServer proxy configuration can inject custom headers to solve CORS issues.

devServer Proxy Example

devServer: {
  // ...
  headers: {
    'Access-Control-Allow-Origin': '*', // CORS
  },
  proxy: {
    '/h5/ajaxObj': {
      target: 'http://xxx.xxx.xxx.com',
      onProxyReq: (proxyReq) => {
        proxyReq.setHeader('Origin', 'http://xxx.xxx.com');
      },
      onProxyRes: (proxyRes) => {
        // ...
      },
    },
  },
},

Performance Optimization – Node & Happypack

The author compares Node 8.x and 10.x compile/re‑compile times, showing a 30%+ speed gain. Upgrading to Node 11.x broke node‑sass, highlighting the need for matching native module versions. Babel 6→7 gave negligible speed improvement.

Enabling Happypack (multi‑threaded loader execution) reduced first‑compile time by ~20%. However, Happypack has limited support for file-loader and url-loader, and adding ts-loader caused compilation issues, so the author kept TypeScript files minimal.

Performance Optimization – DLL & Bundle Analysis

Using webpack-bundle-analyzer, the author identified 3532 modules and 62 chunks in the original build. By extracting frequently used libraries (React, React‑DOM, React‑Router, Redux, AntV, G2, etc.) into a DLL, the module count dropped to ~1500 and build time was cut by threefold.

Further optimization was achieved by configuring optimization options such as terser, chunks: 'all', and disabling source‑map generation for minimizers.

Dynamic Import Example

() => import(/* webpackChunkName: "chunkNameDisplay" */ '../containers/UserList/chunkNameDisplay')

Conclusion – The article summarizes the historical background of frontend build tools, presents a practical file structure, and demonstrates how systematic analysis and configuration (Node version, Happypack, DLL, optimization flags) can dramatically improve Webpack build performance. It also hints at future changes with Webpack 5.x and evolving ecosystem integrations.