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

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

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.

<code>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(),
};
</code>

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.

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

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.

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

CSS/SCSS

Chain

style-loader

,

css-loader

,

postcss-loader

, and

sass-loader

(right‑to‑left order). Set

importLoaders: 2

for

css-loader

.

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

Assets (Images, Fonts, PDFs)

Use

file-loader

to copy files and generate URLs.

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

AMD Modules (e.g., Zepto)

Combine

exports-loader

and

script-loader

to import AMD libraries.

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

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.

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

mini-css-extract-plugin

Extract CSS into separate files with

contenthash

to avoid cache invalidation when JS changes.

<code>{
  loader: MiniCssExtractPlugin.loader,
  options: { publicPath: CDN.css }
},
'css-loader',
'postcss-loader',
'sass-loader'
</code>

5. Other Configurations

resolve

Define aliases for frequently used paths, e.g.,

h5

and

pc

directories.

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

webpack-dev-server

Configure

devServer

with

publicPath

,

port

, and

hot

for HMR. Remember to add

HotModuleReplacementPlugin

.

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

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.

<code>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
    }
  }
}
</code>

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.