Master Multi‑Page Webpack 4 Configuration: From Zero to Production

Webpack 4 Multi‑Page Project Configuration

Webpack treats everything as a module, building a dependency graph and bundling modules into one or more bundles. Webpack 4 introduces zero‑configuration mode with a new mode option (development or production) that provides sensible defaults.

Project Structure

- src
  - common   // shared code
  - pages
    - [pageName]
      - index.js
      - index.html

1. Multi‑Page Entry Configuration

Entry points can be defined as an object where each key is the entry name. For many pages, a getEntry() function scans the src/pages folder and builds the entry object dynamically.

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  },
  mode: 'development'
};

function getEntry() {
  const entry = {};
  const files = glob.sync('./src/pages/*/*/index.js');
  files.forEach(filePath => {
    const name = filePath.match(/\/pages\/(.+)\/index.js/)[1];
    entry[name] = filePath;
  });
  return entry;
}

module.exports = {
  mode: 'development',
  entry: getEntry(),
};

2. Output Configuration

The output configuration defines publicPath, filename, chunkFilename, and path. In development, publicPath can be omitted; in production it should point to the CDN.

output: {
  publicPath: CDN.js,
  filename: '[name].[chunkhash].js',
  chunkFilename: '[name]_[chunkhash].min.js',
  path: distDir
}

Dynamic publicPath

Set __webpack_public_path__ at the top of the entry file to adjust the public path per platform (PC or H5).

Hash Types

hash

– project‑wide, chunkhash – per chunk, contenthash – based on file content. chunkhash is commonly used.

3. Loader Configuration

JavaScript

Use babel-loader to transpile modern JavaScript. Remember Babel only transforms syntax, not new APIs; add polyfills via transform-runtime and runtime plugins.

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [path.resolve(rootDir, 'src')]
}

CSS/SCSS

Chain style-loader, css-loader, postcss-loader, and sass-loader (right‑to‑left order). Set importLoaders: 2 for css-loader.

{
  test: /\.scss|\.css/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 2 }
    },
    'postcss-loader',
    'sass-loader'
  ]
}

Assets (Images, Fonts, PDFs)

Use file-loader to copy files and generate URLs.

{
  test: /\.(gif|png|jpe?g|eot|woff|ttf|pdf)$/,
  loader: 'file-loader'
}

AMD Modules (e.g., Zepto)

Combine exports-loader and script-loader to import AMD libraries.

{
  test: require.resolve('zepto'),
  use: ['exports-loader?window.Zepto', 'script-loader']
}

4. Plugin Configuration

html-webpack-plugin

Automatically inject bundled scripts into HTML files. For multiple pages, create an array of plugin instances using the dynamic entry list.

const htmlPluginArray = [];
// inside getEntry loop:
htmlPluginArray.push(new HtmlWebpackPlugin({
  filename: `./${name}/index.html`,
  template: `./src/pages/${name}/index.html`
}));

mini-css-extract-plugin

Extract CSS into separate files with contenthash to avoid cache invalidation when JS changes.

{
  loader: MiniCssExtractPlugin.loader,
  options: { publicPath: CDN.css }
},
'css-loader',
'postcss-loader',
'sass-loader'

5. Other Configurations

resolve

Define aliases for frequently used paths, e.g., h5 and pc directories.

resolve: {
  alias: {
    h5: path.resolve(__dirname, 'src/common/h5/'),
    pc: path.resolve(__dirname, 'src/common/pc/')
  }
}

webpack-dev-server

Configure devServer with publicPath, port, and hot for HMR. Remember to add HotModuleReplacementPlugin.

devServer: {
  publicPath: '/act/',
  port: 8888,
  hot: true
}

Environment‑Specific Configs

Use webpack-merge to combine a common configuration with development or production specific files.

6. Optimization

On‑Demand Loading

Use the dynamic import() syntax (preferred) or legacy require.ensure to split code into separate chunks.

Extracting Common Modules

Configure optimization.splitChunks to create vendor and common bundles based on usage frequency.

splitChunks: {
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendor',
      chunks: 'initial',
      priority: 2,
      minChunks: 2
    },
    common: {
      test: /.js$/,
      name: 'common',
      chunks: 'initial',
      priority: 1,
      minChunks: 2
    }
  }
}

Multi‑Platform Specific Splitting

Define separate cache groups for H5 and PC dependencies (e.g., Zepto vs. jQuery).

Loader Performance

Use exclude and include to limit the files processed by loaders, reducing build time.

Restrict Module Resolution Paths

Set resolve.modules to limit where Webpack searches for modules, improving resolution speed.

Conclusion

This article demonstrates a complete Webpack 4 setup for a multi‑platform, multi‑page project, covering zero‑configuration mode, dynamic entry generation, loader and plugin usage, development server configuration, and advanced optimizations that are applicable to both simple and complex frontend projects.