webpack + babelでバンドルしたjsがIE11で動かない問題

webpack（4.5）でバンドルしたファイルがIE 11だと構文エラーになって動かない。IEの開発者ツールを見ると、確かにconstやimportといった記述がそのままバンドル後のソースコードに吐き出されていた。よくよく見ると、どうやらエントリーポイントのjsだけがbabelで変換されていない模様。

「webpack babel エントリーポイント」とかでググったけどそれっぽい症状も解決策も見あたらない。webpackをgulpに組み込んで使ってるからそこが原因かなとも思い、「Gulpで始めるwebpack 4入門 - Qiita」を参考に一から環境構築し直してみたけど改善は見られなかった。

Nodeのバージョンを現時点の推奨版である8.11.1に上げてみたり、npm_modulesの中のバージョンをそれぞれ最新にしてみたり、babel-polyfill使ってみたりしたけど変わらず。

もう打つ手なしかなと思いつつもなんとなしにwebpack.config.jsを見直すことに。このファイルも散々色々いじって試したけど、そういえばwebpack4から追加になったmodeという項目については変更してなかったな、と。

今まで開発用のdevelopmentだったところを、リリース用設定のproduction に変え、gulpを実行してみたらなんとまぁあっさり解決。production だとminifyされてしまうので読みにくいソースコードではありますが、importやconstで検索かけても一切引っかからないじゃありませんか。IE11での動作も問題なし。IE11で動かしたいときはmodeをproduction にすればいいようです。根本的な解決ではなさそうだけどひとまずはこれで。

ちなみに最終的なwebpack.config.jsはこうなりました。参考までに。

module.exports = {
  mode: 'production',
  entry: {
    'app': ['./app/src/js/app.js']
  },
  output: {
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['env', {'modules': false}]
              ]
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  }
}