Webpack code splitting - Automatically load all chunks by requesting a single chunk?

Question

I'm using Webpack 4.x and have the following in my config:

splitChunks: {
    chunks: 'all',
},
runtimeChunk: true

This results in three chunks in my project:

• app.prod.js
• 1.app.prod.js
• 2.app.prod.js

I'd like to load all three scripts using just one initial request. The reason for this is that I'd like to use the "preload" feature in Electron for security reasons, which accepts a single script.

Is there a way to have the initial app.prod.js require/import the additional chunks automatically?

Vaudois

Hey, did you ever figure this out? – Electrokinetics

Nope. I just load all the chunks manually. Sorry to disappoint. – Vaudois

so annoying that it's not possible – Gunter

I don't know that it's not possible, but if it is, nobody has shown up to say so. – Vaudois

Did you try the dynamic 'import()' syntax ? – Toxicity

It'll work, but refactoring everything into dynamic imports gonna be very annoying – Casilde

Answer 1

We were able to resolve this for our case with code like this:

Under entry you can split your project into "chunks" (using Webpack terminology) and then you can use HtmlWebpackPlugin to generate HTML files with the correct scripts for the given chunk automatically included.

  optimization: {
    runtimeChunk: 'single',
  },
  entry: {
    rendererA: `${basePath}/src/windowA/`,
    rendererB: `${basePath}/src/windowB/`,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(basePath, 'src/index.html'),
      chunks: ['rendererA'],
      filename: 'rendererA.html',
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(basePath, 'src/index.html'),
      chunks: ['rendererB'],
      filename: 'rendererB.html',
    }),
  ]

Vaudois