How to extract React library to separate bundle?

Question

Is it possible to extract React and(or) ReactDOM libraries to separate bundle via Webpack 4? For example I have the React app which includes React, ReactDOM and Moment.js packages. So I expect two bundles as the result:

react.js = react + react-dom
main.js = moment + app components

How to split bundles in depends of name of the packages but not of frequency of use in entry points?

The concept you are looking for is usually referred to as "code splitting" and creating a "vendor chunk": https://stackoverflow.com/questions/48985780/webpack-4-create-vendor-chunk — James Hulse, Sep 13 '18 at 09:10
Yes, you are right. But I want to know is it possible to implement manual setting of this splitting. So I expect to see in my vendor bundle **only** React and ReactDOM, but not a moment. — b4v, Sep 13 '18 at 09:19
This thread won't help in separating only react and react-dom — Sakhi Mansoor, Sep 13 '18 at 12:31

score 2 · Accepted Answer · answered Sep 14 '18 at 08:30

Hi @VRSY after spending some time in understanding webpack's SplitChunksPlugins.js I figured it out how to write RegEx to extract node_modules in spearate vendor chunks.

splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }

New chunk would be bigger than 30kb

I was doing a mistake while writing a regex before for module folder name. But relative path regex is a good bet to match the regex.

How to extract React library to separate bundle?

1 Answers1