CODEWITHSUNDEEP
reactjswebpack
Avraam Mavridis
Avraam Mavridis

Reputation: 8920

Exclude specific packages from bundle in Webpack

I am trying to find a way to exclude specific package of a subdepedency from my Webpack bundle. I tried many ways, my recent attempt is to (ab)use the externals options like:

externals: [
    function externals(context, request, callback) {
        if (
        context.includes('ui-lib/node_modules/react-dom/') ||
        context.includes('ui-lib/node_modules/d3/') ||
        context.includes('ui-lib/node_modules/lodash/')
        ) {
        return false;
        }
        callback();
    },
],

Without success, is any other way to achieve that?

I have a vendors bundle that looks like:

enter image description here

I want to exclude the duplicate packages under the node-modules, e.g. react-dom.

Entry

entry: {
  app: ['babel-polyfill', path.join(__dirname, './../index.dev.js')],
  vendor: ['react', 'react-dom', 'd3'],
},

CommonChunk

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  filename: 'vendorbundle.js',
  chunks: ['app'],
  minChunks(module) {
    return module.context && module.context.includes('node_modules');
  },
}),

Upvotes: 4

Views: 16680

Answers (2)

Avraam Mavridis
Avraam Mavridis

Reputation: 8920

For future reference, external libraries that use React need to declare it as peerDepedency. Doing that removed one of the react-dom instances:

enter image description here

Upvotes: 2

Chase DeAnda
Chase DeAnda

Reputation: 16441

You should be able to exclude a specific package in the loader config:

  {
    test: /\.js$/,
    exclude: [/node_modules\/SUBDEPENDENCY_PATH/]
  },

Updated:

Ah okay makes sense, in that case, I would make a separate chunk for just that package. Then using HTMLWebpackPlugin, you can tell it to ignore that chunk and not pull it into the app:

entry: {
  sub: ["subdependency"],
  app: "./entry"
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "sub",
    filename: "sub.js"
  }),
  new HtmlWebpackPlugin({
    excludeChunks: ['sub']
  })
]

Update 2:

Sounds like what you want is to dedupe dependencies. You can't do this using Webpack, you'll need to use npm or yarn:

For example, consider this dependency graph:

a
+-- b <-- depends on [email protected]
|   `-- [email protected]
`-- d <-- depends on c@~1.0.9
    `-- [email protected]

In this case, npm-dedupe will transform the tree to:

a
+-- b
+-- d
`-- [email protected]

Upvotes: 2

Related Questions