Webpack如何应对含数百页面的多页面应用（MPA）场景？

Absolutely, Webpack is totally up to the task of handling large-scale multi-page applications (MPAs) with hundreds of pages—you just need to set up your configuration strategically to keep things maintainable and build times in check. I’ve worked on several projects with similar scale, so let me walk you through the key approaches that worked for us:

Manually listing every page’s entry in your Webpack config is a nightmare—especially when you’re adding new pages monthly. Instead, use Node.js’s fs module to automatically scan your project structure and generate entries dynamically. Here’s a quick example:

const fs = require('fs');
const path = require('path');

const pagesRoot = path.resolve(__dirname, './src/pages');
const entry = {};

// Traverse each business module folder
fs.readdirSync(pagesRoot).forEach(moduleFolder => {
  const modulePath = path.join(pagesRoot, moduleFolder);
  if (fs.statSync(modulePath).isDirectory()) {
    // Traverse each page folder inside the module
    fs.readdirSync(modulePath).forEach(pageFolder => {
      const pagePath = path.join(modulePath, pageFolder);
      const entryFile = path.join(pagePath, 'index.js'); // Assume each page uses index.js as entry
      if (fs.existsSync(entryFile)) {
        // Use module/page as the entry key (e.g., user-dashboard/profile)
        entry[`${moduleFolder}/${pageFolder}`] = entryFile;
      }
    });
  }
});

module.exports = {
  entry,
  // Rest of your config...
};

With this setup, you just need to create a new folder for each page (following the src/pages/[module]/[page]/index.js pattern) and Webpack will pick it up automatically—no config edits required.

Hundreds of pages can slow down builds if you don’t optimize. Here are the most impactful tweaks:

• Enable Caching: Add cache: { type: 'filesystem' } to your Webpack config. This caches compiled modules to disk, so subsequent builds only reprocess changed files.
• Split Common Code: Use splitChunks to extract shared dependencies (like Vue/React, or your own common components) into separate chunks. This avoids redundant code across pages and reduces bundle sizes:

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        common: {
          name: 'common',
          minChunks: 2, // Split code used in at least 2 pages
          chunks: 'all',
          priority: -10,
          reuseExistingChunk: true,
        },
      },
    },
  }
  

• Parallelize Loader Work: Use thread-loader to offload heavy loaders (like babel-loader) to a worker pool, compiling modules in parallel:

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: ['thread-loader', 'babel-loader'],
        },
      ],
    },
  };
  

• Stick to Incremental Builds: Use webpack --watch or webpack-dev-server during development—these tools only rebuild the pages that have changed, not the entire app.

Each page needs its own HTML file, and manually creating them isn’t feasible. Use html-webpack-plugin to generate HTML files dynamically, one for each entry. Pair it with your auto-generated entries:

const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugins = Object.keys(entry).map(entryKey => {
  const [moduleName, pageName] = entryKey.split('/');
  return new HtmlWebpackPlugin({
    filename: `${moduleName}/${pageName}.html`, // Output path (e.g., checkout/payment.html)
    template: path.resolve(__dirname, './src/template.html'), // Reusable base template
    chunks: [entryKey, 'vendors', 'common'], // Include the page's chunk + shared chunks
    minify: process.env.NODE_ENV === 'production' ? {
      collapseWhitespace: true,
      removeComments: true,
    } : false,
  });
});

module.exports = {
  // Rest of your config...
  plugins: [...htmlPlugins],
};

This ensures every page gets a properly structured HTML file with all necessary bundles linked.

For pages with heavy components or non-critical functionality, use dynamic import() statements to split code into lazy-loaded chunks. This reduces initial load time for the page:

// In a page's entry file
document.getElementById('modal-trigger').addEventListener('click', async () => {
  const { CheckoutModal } = await import('./components/CheckoutModal');
  CheckoutModal.render();
});

Webpack will automatically bundle CheckoutModal into a separate chunk that only loads when the user clicks the trigger.

To keep things organized as your app grows, stick to a consistent directory structure like this:

src/
  pages/
    user-module/
      profile-page/
        index.js
        index.css
        local-components/
    order-module/
      checkout-page/
        index.js
        index.css
  common/
    components/
    utils/
    styles/
  template.html

Each page’s assets (JS, CSS, local components) live in its own folder, while shared code goes into the common directory. This makes it easy to navigate and ensures your auto-scanning logic works reliably.

In short: Webpack is absolutely suitable for large MPAs—you just need to automate repetitive tasks, optimize build performance, and keep your project structure clean. With these steps, even hundreds of pages will be manageable.

内容的提问来源于stack exchange，提问作者Jess