Webpack 4 and code splitting

On February 25, 2018, webpack 4.0.0 was released (and today 4.0.1). One of the most useful and relatively new features of webpack is code splitting , transferred in the new version from plug-ins to the main configuration. With almost no documentation, as it is now necessary to configure code splitting in version 4, I was a bit shocked, but I still tried to gather information in order to start working with the new version to a minimum. I hope that after some time there will be detailed tutorials and articles. In the meantime, I hasten to take notes on the information found so as not to lose it on the Internet.

In webpack version 3, code splitting was configured in the plugin parameters:

new CommonsChunkPlugin({ name: 'common', minChunks: 2, }), 

Now a new section has been added to the configuration - optimization. One configuration option that has similar functionality is as follows:

 optimization: { minimize: false, runtimeChunk: { name: 'common' }, splitChunks: { cacheGroups: { default: false, commons: { test: /\.jsx?$/, chunks: 'all', minChunks: 2, name: 'common', enforce: true, }, }, }, }, 

Unfortunately, not all parameters are currently documented and much remains unclear.