ES Module(importとかexportとか)をCommonJS(requireとかmodule.exportsとか)へbabel(transpile)しながらwebpack(bundle)する

setup

$ npm init -y && touch webpack.config.js
$ npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli
$ npm i -S react react-dom

webpack.config.js

const path = require('path')

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: path.resolve(__dirname, "src", "entry.jsx"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"]
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  }
};

run

$ ./node_modules/.bin/webpack
Hash: 0e468e72b73aba9ca423
Version: webpack 4.29.0
Time: 2758ms
Built at: 2019-01-27 23:16:49
    Asset     Size  Chunks             Chunk Names
bundle.js  860 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/gl
obal.js 472 bytes {main} [built]
[./src/entry.jsx] 2.65 KiB {main} [built]
    + 11 hidden modules