splitchunks in webpack 4
ggetz opened this issue · 5 comments
From CesiumGS/cesium#6610
In the cesium and webpack tutorial (https://cesiumjs.org/tutorials/cesium-and-webpack/), there is a section about code splitting which uses webpack.optimize.CommonsChunkPlugin.
However, in the new webpack 4 this has been deprecated, so you get this error:
ERROR Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
I can't seem to work out the correct syntax for using splitChunks with cesium, it would be very helpful to add this to the tutorial.
+1
+1 also
i was able to get things to work with this
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]cesium/,
name: 'Cesium',
chunks: 'all'
}
}
}
}
Note I have the following also in webpack
output: {
path: path.resolve(__dirname, "Bundle"),
filename: "[name].bundle.js",
// Needed to compile multiline strings in Cesium
sourcePrefix: ''
},
and it created the file Cesium.bundle.js
Just to add a bit more ontop of this if you want your other node modules separately chunked:
splitChunks({
cacheGroups: {
vendors: {
name: `chunk-vendors`,
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
commons: {
name: 'Cesium',
test: /[\\/]node_modules[\\/]cesium/,
chunks: 'all'
}
}
})
ol-cesium-webpack-example 下载下来,直接运行 npm i 会报错, 由于我的环境是webpack4.,所以将package文件中的配置修改为webpack4., 运行npm i 正常;
npm start 启动也失败,找不到js文件,于是修改webpack.config.js配置,增加了goog路径,运行成功.
ol-cesium-webpack4-example-master.zip