Webpack - react works even when it's not in 'vendors'

Question

I'm working with Webpack+React and I'm using the CommonsChunkPlugin. The thing is that react works even when I don't put it in the 'vendors' entry (same for other packages). Does that make sense?

My config looks like this:

config.entry.vendors = ['mobx', 'jquery', 'highcharts', 'react-highcharts', 'moment', 'numeral', 'jquery-ui', 'jquery.cookie', 'lodash', 'jquery.waitforimages', 'raven-js'];

config.module.loaders = config.module.loaders.concat([
  {
    test  : /\.less$/,
    loader: ExtractTextPlugin.extract({
      fallback: "style-loader",
      loader  : "css-loader?sourceMap!postcss-loader!less-loader?sourceMap"
    })
  }
]);

config.plugins = config.plugins.concat([
  new ExtractTextPlugin('[name]-[chunkhash].min.css'),
  new webpack.optimize.UglifyJsPlugin({
    minimize  : true,
    mangle    : false, // { except: ['$super', '$', 'exports', 'require'] },
    compressor: {
      warnings : false,
      screw_ie8: true
    },
    sourceMap : true
  }),
  new StatsPlugin('webpack.stats.json', {
    source : false,
    modules: false
  }),
  new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors-[chunkhash].min.js'}),
  new WebpackMd5Hash(),
  new ManifestPlugin(),
  new InlineManifestWebpackPlugin({
    name: 'webpackManifest'
  })
]);

The output value of webpack is:

  output: {
    filename         : '[name].bundle.js',
    publicPath       : '/',
    path             : paths.dist,
    sourceMapFilename: "[name].js.map",
  },

It mostly depends on how you're using CommonsChunkPlugin, could you please post webpack config here? — uladzimir, Feb 11 '17 at 19:08
Possible duplicate of [How to bundle vendor scripts separately and require them as needed with Webpack?](http://stackoverflow.com/questions/30329337/how-to-bundle-vendor-scripts-separately-and-require-them-as-needed-with-webpack) — Andy Ray, Feb 11 '17 at 22:28
Not sure it's a duplication ... I'm just wondering how come react is working if it's not included in the 'vendors' list? — refaelos, Feb 12 '17 at 09:07
@refaelos could you please also put `output` from webpack config? — uladzimir, Feb 12 '17 at 11:22

uladzimir · Accepted Answer · 2017-02-12T13:54:25.227

CommonsChunkPlugin is smart enough, you didn't specify chunks property for CommonsChunkPlugin, that means that plugin will try to go through all your entries and move common parts to vendors chunk and then into vendors-[chunkhash].min.js file.

e.g. you have 2 entry points: index.js, signin.js and in both you have next code:

const React = require('react')
const ReactDOM = require('react-dom')

So with configuration like

entry: {
    app: './index.js',
    signin: './signin.js',
    vendor: ['react']
},
*****
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
         filename: 'vendor-[chunkhash].js'
    })
]

you will still have react-dom in vendor chunk.

On another hand if you have third entry point without requiring react-dom, only react will be moved to vendor chunk.

But even in this case you will still have react-dom included into first two entry chunks.

The thing is that react works event when I don't put it in the 'vendors' entry (same for other packages).

So react will work in any case, the only difference will be, will react chunk be moved to vendors or not, if not, it still will be included in your entry point file.

Hope it helps.

thanks! So react is included in the entry point file. If I add it to 'vendors' it'll be included in vendors file and removed from entry point file? — refaelos, Feb 12 '17 at 11:56

Webpack - react works even when it's not in 'vendors'

1 Answers1