Modern webpack config for ES6+ code

modernWebpack.config.js

const path = require("path");
const modernBabelConfig = require("babel.modern.config.js");

module.exports = {
  context: path.resolve(__dirname, "src"),
  resolve: {
    extensions: [".js", ".jsx"],
    alias: {...},
    modules: [
      path.resolve(__dirname, "src"),
      path.resolve(__dirname, "node_modules"),
    ],
  },
  node: {...},
  stats: {...},
  watchOptions: {...},
  entry: {
    main: path.resolve(__dirname, "src/client/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "client-build-modern"),
    filename: "js/[name].[chunkhash:9].js",
    chunkFilename: "js/[name].[chunkhash:9].js",
  },
  name: "modern-build",
  module: {
    rules: [
      {
        test: /\.jsx?/,
        include: path.resolve(__dirname, "src"),
        use: [
          {
            loader: "babel-loader",
            options: Object.assign(modernBabelConfig(), {
              cacheDirectory: true,
              cacheCompression: false,
            }),
          },
          //...other loaders
        ],
      },
      // css configs
    ],
  },
  optimization: {...},
  plugins: [
    // ...other loaders
    new LoadablePlugin({ filename: "modern-loadable-stats.json" }),
  ],
  devtool: "source-map",
  mode: "production",
};