[英]Split vendor bundle
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).
(一部分包含所有与React相关的软件包,另一部分包含其余的软件包)。
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. 我已经在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)
}),
One easy way to deal with it is to specify the content of your vendor and react in entry property like this : 一种简单的处理方法是指定供应商的内容,并在条目属性中做出如下反应:
entry: {
app: ['./src/index.js'],
react: [
'react',
'react-dom'],
vendor: [
'other-libraries',
]
}
Then you can specify these entries in CommonsChunkPlugin like this: 然后,您可以在CommonsChunkPlugin中指定这些条目,如下所示:
new webpack.optimize.CommonsChunkPlugin({
name: ['react', 'vendor']
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.