splitchunks in webpack 4

[ggetz]

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.

[bneigher]

+1

[cmcleese]

+1 also

[bmckilligan]

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

[cmcleese]

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'
    }
  }
})

See the tree report:

[Southjor]

ol-cesium-webpack-example 下载下来,直接运行 npm i 会报错, 由于我的环境是webpack4.,所以将package文件中的配置修改为webpack4., 运行npm i 正常;
npm start 启动也失败,找不到js文件,于是修改webpack.config.js配置,增加了goog路径,运行成功.
ol-cesium-webpack4-example-master.zip