Webpack config with Loadable Component

webpack.config.js

import webpack from 'webpack';
import path from 'path';

const common = {
  // imagine your configuration here
};

const plugins = [
  // imagine your Babel plugins here
];

const presets = [
  // imagine your Babel presets here
];

export default {
  entry: [
    '@babel/polyfill',
    './src/client',
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                // this is the important part...
                '@loadable/babel-plugin',
                ...plugins,
              ],
              presets,
            },
          },
        ],
      },
      ...common.plugins.module.rules,
    ],
  },
  plugins: [
    // this is too...
    new LoadablePlugin(),
    new webpack.DefinePlugin({
      LOADABLE_STATS: JSON.stringify(path.resolve(__dirname, '../build/loadable-stats.json')),
    }),
    ...common.plugins,
  ],
  optimization: {
    // https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks
    splitChunks: {
      chunks: 'all',
    },
  },
  ...common,
};