如何用两个HtmlWebpackPlugin实例分别引入对应入口脚本？

当然可以实现每个模板只引入对应的入口脚本！问题出在你没有给每个HtmlWebpackPlugin实例指定要关联的chunk，默认情况下插件会把所有生成的脚本都引入到模板里。只需要添加chunks配置项就能轻松解决这个问题。

具体配置修改 #

你只需要在每个HtmlWebpackPlugin的配置对象里，添加chunks数组，明确指定该模板要包含的入口chunk名称：

entry: {
  app: 'src/client/app.js',
  unauthApp: 'src/client/unauth.js'
},
output: {
  path: 'dist',
  filename: 'scripts/[name]-[chunkhash].js'
},
plugins: [
  new HtmlWebpackPlugin({
    filename: 'views/index.html',
    // 指定只引入app对应的chunk
    chunks: ['app']
  }),
  new HtmlWebpackPlugin({
    filename: 'views/index-unauth.html',
    // 指定只引入unauthApp对应的chunk
    chunks: ['unauthApp']
  })
]

额外说明 #

如果你的项目里还有公共chunk（比如通过splitChunks提取的vendor代码），想要在对应的模板里同时引入公共chunk，只需要把公共chunk的名字加入到chunks数组里即可。比如：

chunks: ['vendor', 'app']

这样配置后，index.html就只会引入app-[chunkhash].js，而index-unauth.html只会引入unauthApp-[chunkhash].js，完美解决你的问题！

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