Webpack配置疑问：如何为单个HTML绑定对应入口JS文件

没问题！这其实是html-webpack-plugin的常用场景，你只需要在Webpack配置里多次实例化这个插件，给每个实例指定对应的入口和输出HTML文件就行。我给你一步步拆解怎么做：

第一步：配置多入口 #

首先在Webpack的entry里明确定义你的两个入口文件：

module.exports = {
  entry: {
    one: './src/one.js',
    two: './src/two.js'
  },
  // 其他基础配置（比如output、module规则等）...
}

第二步：多次实例化HtmlWebpackPlugin #

接下来在plugins数组里，给每个HTML文件创建一个插件实例，通过chunks选项指定要绑定的入口，用filename指定输出的HTML文件名：

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

module.exports = {
  // 上面的entry配置...
  plugins: [
    // 绑定one.js到one.htm
    new HtmlWebpackPlugin({
      filename: 'one.htm',
      chunks: ['one'], // 只引入名为"one"的入口打包产物
      template: './src/one-template.htm' // 可选：如果你有自定义HTML模板的话
    }),
    // 绑定two.js到two.htm
    new HtmlWebpackPlugin({
      filename: 'two.htm',
      chunks: ['two'], // 只引入名为"two"的入口打包产物
      template: './src/two-template.htm' // 可选
    })
  ]
};

额外小贴士 #

• chunks是核心配置项，它会精准控制哪些打包产物被注入到当前HTML中，完全避免引入无关的chunk。
• 如果不需要自定义模板，可以省略template选项，插件会自动生成一个包含指定chunk的基础HTML文件。
• 要是有公共chunk（比如抽离的第三方库、公共工具函数），只需把公共chunk的名称加入对应chunks数组即可，比如chunks: ['common', 'one']，这样one.htm会同时引入公共chunk和one.js。

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