如何让HtmlWebpackPlugin仅引入[name]文件夹内的bundle？

你的核心问题是没有给每个站点单独配置HtmlWebpackPlugin实例，默认单个实例会注入所有bundle。按下面的方式修改配置就能解决：

1. 先把webpack的entry配置为对象形式，每个key对应一个独立站点的入口：

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

// 定义各个站点的入口，key作为站点唯一标识
const siteEntries = {
  siteA: './src/sites/siteA/main.js',
  siteB: './src/sites/siteB/main.js',
  // 其他站点可继续添加
};

2. 遍历entry的key，为每个站点生成单独的HtmlWebpackPlugin实例：

// 生成对应每个站点的HTML插件数组
const htmlPlugins = Object.keys(siteEntries).map(siteKey => {
  return new HtmlWebpackPlugin({
    filename: `${siteKey}/index.html`, // 输出到对应站点文件夹下
    template: './src/template.html',
    chunks: [siteKey], // 只引入当前站点entry对应的bundle
    inject: 'body' // 可选，指定bundle注入位置
  });
});

3. 在webpack主配置里整合这些内容：

module.exports = {
  entry: siteEntries,
  output: {
    filename: '[name]/[name].[contenthash].js', // 每个站点的bundle输出到对应文件夹
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  plugins: [...htmlPlugins]
};

关键说明 #

你之前误解了chunks参数的用法：它不需要填写带contenthash的文件名，而是填写entry对象的key（比如上面的siteA、siteB）。webpack内部会自动关联该key对应的输出bundle（不管有没有contenthash），这样每个站点的index.html只会引入自己文件夹下的bundle，不会混入其他站点的文件。

这样配置后，每个输出文件夹里的index.html都会正确注入对应站点的带contenthash的bundle，完全符合你的需求。

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