13

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.

Roman Pokrovskij
  • 9,449
  • 21
  • 87
  • 142
Chef
  • 633
  • 5
  • 17
  • What does `preload.js` contain? Can you create a reproducable minimal example on git..? – Legends Apr 29 '18 at 11:03
  • `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. – Chef Apr 29 '18 at 12:47
  • 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? :-) – Legends Apr 29 '18 at 13:01
  • For the longer version: https://stackoverflow.com/a/49213048/2581562 – Legends Apr 29 '18 at 13:04
  • 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. – Legends Apr 29 '18 at 13:06
  • https://github.com/blackChef/webpack_multiple_entry_test/tree/master – Chef Apr 29 '18 at 14:06
  • 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? – Legends Apr 29 '18 at 19:53
  • Yes, that's what I want. – Chef Apr 30 '18 at 00:32
  • 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. – Legends Apr 30 '18 at 09:45

3 Answers3

0

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';
      },
    },
  },
};
NeoZoom.lua
  • 2,269
  • 4
  • 30
  • 64
  • Important is also to define the chunk name at the specific entrypoint: https://stackoverflow.com/questions/73871637/webpack-chunks-split-for-website-and-widget-based-on-entrypoint/73881742#73881742 – velop Sep 28 '22 at 12:50
-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

Tudor Ilisoi
  • 2,934
  • 23
  • 25
-4

You can use the following config:

splitChunks {
  vendor: {
    name: 'vendor',
    chunks: 'all',
    test: /node_modules/
  }
}
albertfdp
  • 425
  • 4
  • 11