想象我有一个丰富的应用程序,它使用了大量的第三方模块,包括lodash,时刻,爱可信,反应。的WebPack 2:拆分库,供应商和应用到不同的文件
如果我将所有内容捆绑在一个包中,则最终的大小应该高于1MB。
我想的WebPack收拾我的图书馆的路上,它存储:
- lodash分别
- 时刻分别
- 所有其他node_modules供应商下存储捆绑
- 应用程序的代码存储在单独的文件
我试图以不同的方式玩CommonsChunkPlugin,但从未收到我想要的结果。
我准备的实例库来说明我的问题: https://github.com/PavelPolyakov/webpack-react-bundles
的WebPack入口部分(conf/webpack.base.config.js):
entry: {
lodash: 'lodash',
moment: 'moment',
app: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3001',
'webpack/hot/only-dev-server',
'./app/index.js']
}
这里是生产配置(conf/webpack.production.config.js),试图独立的模块:
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context &&
module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: true
}
})]
这种情况下,时刻和lodash仍然会出现在vend或捆绑。我想要把它们放在两个单独的包中。
任何想法赞赏。
你有没有试过使用CommonsChunkPlugin的两个实例,一个用'name:“lodash”',另一个用于'moment'?或者'name:[“lodash”,“webpack”]',如[docs](https://webpack.js.org/guides/code-splitting-libraries/)所示。 – opatut
是的,我试过了,这并没有帮助。或者我尝试了一种错误的方式。 –