How can I use multiple entries in Webpack alongside multiple HTML files in HtmlWebpackPlugin?

Question

We\'d like to have two outputs from Webpack - our entire app with all of its dependencies, and a single different page with only one dependency (that isn\'t shared by the ma

Answer 1

This is a multipart issue.

First, there is a bug in Html-Webpack-Plugin that makes it incompatible with Webpack4 and multiple entrypoints. It must be upgraded to v4.0.0-alpha.2 at least to work.

Second, in the new version, you needn't use use optimization.splitChunks.cacheGroups to manually separate out node_modules. Doing optimization.splitChunks.chunks = 'all' is enough to result in a given entrypoint only getting in its vendors-app-{{chunk_name}} chunk the node_modules it actually imports.

So if you do

optimization: {
    splitChunks: {
        chunks: 'all'
    },
},

Combined with

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'public/html/ide.html',
        inject: true,
        chunks: ['app']
    }),
    new HtmlWebpackPlugin({
        filename: 'reset_password.html',
        template: 'public/html/reset_password.html',
        inject: true,
        chunks: ['resetPassword']
    }),
]

Combined with

entry: {
    app: './public/js/ide.js',
    resetPassword: './public/js/reset_password.js'
},

Then, your webpack output will have

1. app
2. resetPassword
3. vendors~app~resetPassword
4. vendors~app
5. vendors~resetPassword

Unless you have no imports in your resetPassword.js file, in which case it will look like

1. app
2. resetPassword
3. vendors~app~resetPassword (necessary webpack vendor packages)
4. vendors~app

More information, images, and conversation at https://github.com/jantimon/html-webpack-plugin/issues/1053

Note that chunksSortMode: is no longer a valid option on the HtmlWebpackPlugin object for the newest version, it is apparently done by default in webpack4.

Answer 2

When you set:

module.exports = {
  //...
  optimization: {
    runtimeChunk: true
  }
};

It generates a runtime chunk. What is a runtime? Runtime is where ALL the code that webpack uses to load other files are. This is the heart of webpack when you run build.

Since you have 2 separate bundle files: resetPassword and app.

Ok, you have all the files you need. You maybe need vendors on both too, since vendor in your case contains everything from node_modules. So basically you will have:

html 1: app, vendor, runtimeChunk.

html 2: reset_password, vendor, runtimeChunk.

By doing that, you application should run.