Webpack 4：babel-loader のアップデートで起きたエラーを解決

babel-loader を 7.1.5 → 8.0.0 のアップデートで、以下のエラーが発生。

error  Module build failed (from ./node_modules/babel-loader/lib/index.js):
 Error: Couldn't find preset "@babel/preset-env" relative to directory

解決ついでにパッケージや設定を整理したので、メモしておく。

1. 関連パッケージの入れ直し

以前 Babel を 6→7 にアップデートした際、不要になったパッケージを削除したかの記憶がなかったので、関連したものは一応全部入れ直した。webpack は入れ直す必要はないだろうが一応入れ直した。

Babel 6 で使うパッケージ群と Webpack をアンインストール
npm uninstall --save-dev babel-core babel-preset-env babel-loader webpack @babel/polyfill

Babel 7 で使うパッケージ群を Webpack インストール
npm install --save-dev @babel/core @babel/preset-env babel-loader webpack

脆弱性の自動修正（完全ではない）
npm audit fix

2. .babelrc、.browserslistrc の修正

変更前

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          '> 0.5% in JP',
          'Firefox ESR'
        ]
      }
    }]
  ]
}

変更後

対応ブラウザの設定は、.browserslistrc で行う。
"useBuiltIns": "usage" で、指定したブラウザに必要な polyfill を import してくれる。
でも、場合によっては別途 polyfill が必要な場合もあるらしいので留意しておく。
（@babel/polyfill は不要になったのでこの記事冒頭のコマンドでアンインストールした）

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}

合わせて .browserslistrc の編集（なければ作成）。
autoprefixer 等を使っていれば、すでにあるはず。
記述に対する対象ブラウザは browserl.ist でチェックできる

> 0.5% in JP
Firefox ESR

3. webpack.config.js の編集

presets を 'env' から '@babel/preset-env' に変更

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'] // 変更前は 'env'
        }
      }
    }
  ]
}

4. gulp に発生したエラーに対処

gulp (v4) のタスクを走らせようとすると、以下のエラーが。

[14:06:41] Failed to load external module @babel/register
[14:06:41] Failed to load external module babel-register
[14:06:41] Failed to load external module babel-core/register
[14:06:41] Failed to load external module babel/register

１番上の @babel/register をインストールすれば良い（他は旧いやつ）。
npm install --save-dev @babel/register

参考記事

• とりあえず webpack 4 で Babel 6 か 7 を導入する - Qiita
• @babel/preset-envのuseBuiltInsを使ってpolyfillする - Qiita
• babel-loader - npm
• babel-preset-env - npm
• @babel/preset-env · Babel
• javascript - Couldn't find preset "@babel/env" - reactjs - Stack Overflow