Exclude certain module from a chunk webpack 4

Question

How can I specify that I don't want a module in a chunk with webpack 4, let's suppose I don't want lodash in the vendor file (No matter the consequences), what can I do?

This is the actual configuration:

splitChunks: {
  name: 'vendors',
  maxAsyncRequests: 1,
  maxInitialRequests: 2,
  chunks: 'initial',
}

score 16 · Answer 1 · answered Feb 21 '19 at 16:07

16

A test can also take a method. This allows a lot of flexibility. For instance..

vendor: {
    test(mod/* , chunk */) {


     // Only node_modules are needed
     if (!mod.context.includes('node_modules')) {
       return false;
     }
     // But not node modules that contain these key words in the path
     if ([ 'lodash', 'react'].some(str => mod.context.includes(str))) {
       return false;
     }
     return true;
   },
   name: 'vendor',
   chunks: 'all',
   reuseExistingChunk: true
 },

answered Feb 21 '19 at 16:07

geedew

1,368
12
16

For specific pckgs like react put rather string like "\\node_modules\\react\\" into the array for exclude. – apincik Oct 25 '19 at 06:41
This pointed me in the right direction, however I had some modules for which context was `undefined`, so I added a condition `if (module.context) {...}` around the code in your solution, and outside of that condition I added a `return false` statement, in order not to include those modules that have no context – Giorgio Tempesta Sep 24 '20 at 09:29

score 8 · Answer 2 · answered Apr 26 '19 at 15:54

8

You can do it using the negative lookahead:

test: /[\\/]node_modules[\\/]((?!(lodash)).*)[\\/]/

answered Apr 26 '19 at 15:54

Davide Patti

3,391
2
18
20

score 2 · Answer 3 · answered Sep 19 '18 at 07:35

You can exclude a specific folder from node_modules by updating the test property. In the example below we create a single chunk containing all vendors, except the Lodash module.

webpack.config.js

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](!lodash)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  }
};

This example is based on the SplitChunksPlugin example from the Webpack docs.

score 1 · Answer 4 · answered Jun 19 '18 at 23:12

The config for loading all of a project's dependencies from /node_modules into a chunk called vendors looks like this:

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: { test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all" }
        }
    }
}

So for your use case, you could modify the RegExp to exclude whatever modules you desire. Of course, the downside is that you have to tangle with regular expressions, and the exact formatting of that particular testing condition is beyond my expertise. I know the documentation on optimization.splitChunks is still pretty sparse so I hope this at least helps point you in the right direction.

exactly what he was asking, and you said beyond my expertise — 29er, Jul 28 '18 at 00:54

score 1 · Answer 5 · answered Feb 17 '19 at 21:02

1

slightly modified answer @ndequeker

test: /[\\/]node_modules[\\/](?!lodash)(.[a-zA-Z0-9.\-_]+)[\\/]/

It worked for me

answered Feb 17 '19 at 21:02

Alexey Tuychiev

11
2

Exclude certain module from a chunk webpack 4

5 Answers5