Webpack 2 html files with separate builds

Question

I want to setup a project that has 2 html files: index.html and iframe.html.

The index.html should have injected the bundle that comes from index.js file, but for iframe.html I would like to inject the bundle that comes from dependencies that are included in iframe.js file.

I've got a webpack (common) configuration for 2 entry points:

entry: {
 app: Path.resolve(__dirname, '../src/scripts/index.js'),
 iframe: Path.resolve(__dirname, '../src/scripts/iframe.js')
},
output: {
  path: Path.join(__dirname, '../build'),
  filename: 'js/[name].js'
},

But it seems that both html files got injected full bundles - how can I split it? (and make sure that index.js will not contain/share the code from iframe.js file?)

score 2 · Accepted Answer · answered Sep 18 '19 at 07:42

Thanks to this thread I've found a solution:

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: Path.resolve(__dirname, '../src/index.html'),
  chunks: ['app']
}),
new HtmlWebpackPlugin({
  filename: 'iframe.html',
  template: Path.resolve(__dirname, '../src/iframe.html'),
  chunks: ['iframe']
})

Webpack 2 html files with separate builds

1 Answers1