将单独的入口点脚本分配给单独的 HtmlWebpackPlugin 实例答案

【问题标题】：Assign separate entrypoint scripts to separate HtmlWebpackPlugin instances将单独的入口点脚本分配给单独的 HtmlWebpackPlugin 实例
【发布时间】：2018-10-14 05:43:25
【问题描述】：

给定一个像

这样的入口/输出

entry: {
    app: 'src/client/app.js',
    unauthApp.js: 'src/client/unauth.js'
  },
output: {
  path: 'dist',
  filename: 'scripts/[name]-[chunkhash].js'
},
...
plugins: [
  new HtmlWebpackPlugin({
    filename: 'views/index.html'
  }),
  new HtmlWebpackPlugin({
    filename: 'views/index-inauth.html'
  })
]

是否可以使用HtmlWebpackPlugin 的两个实例将app 脚本放入一个模板，将unauthApp 脚本放入另一个模板。到目前为止，我所能做的就是将两个脚本都放入其中。我也在使用htmlWebpackTemplate，所以也许有一个我没见过的选项。

webpack@^4.6.0

【问题讨论】：

标签： javascript node.js webpack html-webpack-plugin

【解决方案1】：

您尝试过chunks 字段吗？它Allows you to add only some chunks (e.g only the unit-test chunk)

plugins: [
  new HtmlWebpackPlugin({
    filename: 'views/index.html',
    chunks: ['app'],
    inject: true
  }),
  new HtmlWebpackPlugin({
    filename: 'views/index-unauth.html',
    chunks: ['unauthApp.js'],
    inject: true
  })
]

【讨论】：