Webpack v4 の babel-loader で async / await に対応させ、 IE11 にも対応させる設定

要件

• Webpack で Babel をコンパイルしたい
  • async / await (ES2016+) に対応
  • IE11 にも対応 (polyfill)

install

npm install webpack babel-loader @babel/core @babel/preset-env @babel/polyfill core-js@2

書き方

設定ファイル

（ルールの箇所のみを抜粋）

webpack.config.js

{
    test: /\.js$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                modules: false,
                targets: {
                  node: 'current',
                  ie: 11
                },
                useBuiltIns: 'entry',
                corejs: 2
              }
            ]
          ]
        }
      }
    ]
  }

entryポイントのjs

（importの箇所のみを抜粋）

app.js

import '@babel/polyfill';

[追記]

@babel/polyfill is deprecated

@babel/polyfill は廃止予定らしい？！

今後は、@babel/polyfill を構成している
core-jsとregenerator-runtime/runtimeを直接読み込んで対応していくっぽい。

app.js

// import '@babel/polyfill';
import 'core-js';
import 'regenerator-runtime/runtime';

webpack.config.js

{
    test: /\.js$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
//              以下の設定は、無くても動いた
//                modules: false,
//                targets: {
//                  node: 'current',
//                  ie: 11
//                },
                useBuiltIns: 'entry',
                corejs: 2
              }
            ]
          ]
        }
      }
    ]
  }

参考: core-js@3 だと、IE11でエラーが出る模様。。
https://github.com/zloirock/core-js/issues/514#issuecomment-476364862