Webpack 4 and code splitting

On February 25, 2018, webpack 4.0.0 (and today 4.0.1) was released. One of the useful and relatively new features of webpack - code splitting , is transferred in the new version from plugins to the main configuration. With an almost complete absence of documentation on how to now configure code splitting in version 4, I experienced a bit of shock, but still tried to collect information in order to start working with the new version to a minimum. I hope that in time some comprehensive tutorials and articles will appear. 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 of the configuration options that has similar functionality looks like this:

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.