In webpack 4, how to only splitChunks on one entry?

Question

I have two entries: page1.js, page2.js.

I don't want to extract shared codes between two entries. I only want to extract node_modules used in page2.js.

How do I achieve this in webpack 4? Thanks.

Zephaniah

What does preload.js contain? Can you create a reproducable minimal example on git..? – Commonly

preload.js should be page1.js, index.js should be page2.js. Sorry about the confusing names. What page1.js contains shouldn't affect anything here. – Zephaniah

Webpack 4 now by default does optimizations automatically. It analyzes your dependency graph and creates optimal bundles (output), based on the following conditions: New chunk can be shared OR modules are from the node_modules folder New chunk would be bigger than 30kb (before min+gz) Maximum number of parallel request when loading chunks on demand <= 5 Maximum number of parallel request at initial page load <= 3 Question: Now why would you want to do, what you want to do? :-) – Commonly

For the longer version: https://mcmap.net/q/909378/-webpack-4-migration-commonschunkplugin – Commonly

But if you still want to do it the way you ask for, just setup a little exampel repo on github and I will take a look. – Commonly

github.com/blackChef/webpack_multiple_entry_test/tree/master – Zephaniah

We have to clear some things upfront. Currently you have page1 and page 2 as entry-points, both have a dependency on lodash in your sample repo. With the current config it extracts lodash which resides under node_modules into a speparate output file named page1_vendor.build. This file contains the shared dep lodash. And you want to extract lodash for page1 into a separate file (current config), but for page2 you want lodash to be part of page2? Is this what you want? – Commonly

Yes, that's what I want. – Zephaniah

AFAIK, this is not possible without hooking into the build process using a custom plugin. But still don't get what is the main-goal doing it like this? Because WP4 outputs optimized bundles already, which can be tweaked using the splitChunks section. – Commonly

Answer 1

In Webpack 4, you will have to have two webpack.config.js, one for each entry, i.e. you will have to build them separately.

In Webpack 5, you can use chunks() function of SplitChunksPlugin, see the docs:

Alternatively, you may provide a function for more control. The return value will indicate whether to include each chunk.

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks(chunk) {
        // exclude `my-excluded-chunk`
        return chunk.name !== 'my-excluded-chunk';
      },
    },
  },
};

Rodrigues

Important is also to define the chunk name at the specific entrypoint: #73872137 – Leroylerwick

Answer 2

From the official docs, having multiple entries will create separate dependency graphs for each entry.

const config = {
  entry: {
    pageOne: './src/page1.js',
    pageTwo: './src/page2.js',

  },
  output: {
   path: path.resolve(__dirname, 'dist')   
  }
};

Reference: https://webpack.js.org/concepts/entry-points/#multi-page-application

Yellowhammer

The OP asks about Webpack 4, CommonsChunkPlugin is not there. – Consumption

Answer 3

You can use the following config:

splitChunks {
  vendor: {
    name: 'vendor',
    chunks: 'all',
    test: /node_modules/
  }
}

Undersheriff

It doesn't because it is extracting node_modules from both pages. – Egis