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.

    Also popular now: