Assign separate entrypoint scripts to separate HtmlWebpackPlugin instances

Question

Given an entry/output like

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'
  })
]

is it possible using two instances of HtmlWebpackPlugin to put the app script into one template and the unauthApp script into the other. So far all I have been able to do is put both scripts in both. I'm also playing with using htmlWebpackTemplate so perhaps there is an option there I have not seen.

webpack@^4.6.0

Answer 1

Have you tried the chunks field? It 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
  })
]