My vendor bundle is getting really big and I want to split into 2 parts. (One part with all the react related packages, and the other with the rest of the packages).
What I currently have to create the vendor bundle is:
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor'],
filename: '[name].bundle.js',
minChunks: module => module.context.includes('node_modules')
})
I tried adding these different approaches below, but no success so far:
// approach 1
new webpack.optimize.CommonsChunkPlugin({
name: 'react',
chunks: ['vendor'],
minChunks: ({resource}) => (/node_modules\/react/).test(resource)
})
// approach 2
new webpack.optimize.CommonsChunkPlugin({
name: ['react'],
filename: '[name].bundle.js',
minChunks: ({resource}) => (/node_modules\/react/).test(resource)
})
The split happens, but I cannot run in the browser. In my console I get:
vendor.bundle.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at vendor.bundle.js:1
(anonymous) @ vendor.bundle.js:1
12:52:57.478 react.bundle.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (react.bundle.js:55)
at eval (react.development.js:18)
at eval (react.development.js:1356)
at Object.603 (react.bundle.js:747)
at __webpack_require__ (react.bundle.js:55)
at eval (index.js:6)
at Object.0 (react.bundle.js:156)
at __webpack_require__ (react.bundle.js:55)
at eval (index.jsx:8)
at Object.<anonymous> (client.bundle.js:1375)
I've already loaded the new file with the tag in my html.
I just solved the issue using the following solution:
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor'],
filename: '[name].bundle.js',
minChunks: module => module.context.includes('node_modules') && !module.request.includes('scss')
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'react',
chunks: ['vendor'],
minChunks: ({resource}) => (/node_modules\/react/).test(resource)
}),