如何通过HtmlWebpackPlugin在Webpack配置中生成多HTML页面？

太巧了，用HtmlWebpackPlugin实例数组生成多页面就是最直接的解决方案！我来给你梳理清楚具体怎么配置，还有一些实用的细节需要注意。

1. 先确认依赖已安装 #

首先得确保你已经把插件装到项目里了，如果还没安装，执行这条命令：

npm install html-webpack-plugin --save-dev
# 或者用yarn
yarn add html-webpack-plugin --dev

2. 配置Webpack的plugins数组 #

在你的Webpack配置文件（一般是webpack.config.js）里，导入插件后，创建多个HtmlWebpackPlugin实例组成的数组，把这个数组塞进plugins选项就行。下面是完整的示例代码，你可以直接参考调整：

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

// 替换成你项目里的实际应用目录
const APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
  // 其他基础配置（入口、输出等）
  entry: {
    // 如果每个页面有独立的入口JS，这里可以对应配置多个
    grid1: path.resolve(APP_DIR, 'grid1.js'),
    grid2: path.resolve(APP_DIR, 'grid2.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 每次构建自动清空dist目录，避免冗余文件
  },
  plugins: [
    // 第一个页面：grid_1.html
    new HtmlWebpackPlugin({
      title: "TV Grid_1",
      template: path.resolve(APP_DIR, 'index.template.ejs'), // 你的模板文件路径
      filename: "grid_1.html", // 输出的HTML文件名
      chunks: ['grid1'], // 只引入对应页面的入口JS，避免加载多余代码
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
      }
    }),
    // 第二个页面：grid_2.html
    new HtmlWebpackPlugin({
      title: "TV Grid_2",
      template: path.resolve(APP_DIR, 'index.template.ejs'), // 可以复用同一个模板，也可以指定不同模板
      filename: "grid_2.html",
      chunks: ['grid2'], // 对应第二个入口JS
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
      }
    })
    // 需要更多页面的话，继续在这里添加新的HtmlWebpackPlugin实例就行
  ]
};

3. 关键参数说明 #

• title: 生成的HTML页面的<title>内容，如果你在模板里写了<%= htmlWebpackPlugin.options.title %>，会自动替换成这个值。
• template: 你的HTML模板文件路径，支持ejs、html等格式，模板里可以用插件提供的变量动态插入内容。
• filename: 输出到dist目录的HTML文件名，还支持子路径格式（比如pages/grid_1.html）。
• chunks: 指定这个页面要引入的入口JS文件，这很重要——避免所有入口JS都被塞进每个页面，能有效减少文件体积。
• minify: 生产环境下的HTML压缩配置，你配置的这些规则都是常用的压缩选项，能帮你把HTML文件压得更小。

4. 实用小提示 #

• 如果多个页面的模板大部分内容相同，只是少量细节有差异，可以在HtmlWebpackPlugin实例里加自定义参数，比如customData: { pageType: 'grid' }，然后在模板里用<%= htmlWebpackPlugin.options.customData.pageType %>来获取使用。
• 开发环境调试的时候，可以暂时把minify设为false，这样生成的HTML不会被压缩，方便你查看结构。

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