webpack + Babel を使ってIE対応したつもりが、アロー関数が残っていてIEで実行できなかった件 #JavaScript

あるプロジェクトで、webpackでVue.jsの環境構築をしました。
Babelを導入しトランスパイルの設定もしたので、Internet Explorer (IE11) でも動くだろうと思っていました。
しかし、実際にIE11で確認してみると、Vue.jsで作ったアプリケーションが全く動かない。。
コンソールを見てみると、JavaScriptのエラーが出ていました。
なんでだろうと思い、コンパイル後のファイルを覗いてみると、、

app.js

(()=>{ ... })();

いや、アロー関数残ってるやないかーい！！
IE11はいまだにアロー関数に対応してないので、これだとエラーになってしまいます。

(2022年8月追記) 本質はwebpack 4 → 5の変更点でした

当時は本質を理解しないまま記事を書いてしまったことをお詫び申し上げます
本当の原因は、 webpack5 から出力ターゲットがデフォルトで ES2015 以降になっていることでした。
なので、ターゲットを ES5 にすることでうまくいきます。

webpack.config.js

module.exports = {
  // （略）
  target: ["web", "es5"],
}

↓ 以下、当時の格闘ログを残しておきます。

うまくいかなかったときのwebpackの設定

当初、webpackの設定ファイルの中身はこんな感じでした。

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: {
    app: './src/app.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
  }
}

ちゃんとBabelインストールして設定したのに、何がいけないの？　って感じでした。
Babelの設定の問題だと思い、いろいろ試し、何時間も格闘しました。
が、原因はBabelではありませんでした。

改良後のwebpackの設定

改良後のwebpackの設定ファイルはこんな感じです！

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: {
    app: './src/app.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
    environment: {
      arrowFunction: false
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
  }
}

さて、みなさん、何が変わったかお気づきでしょうか？
なんと、たった3行追加しただけです！

    environment: {
      arrowFunction: false
    }

この3行をoutputの中に入れただけです！
よく見ると、webpackの公式ドキュメントに、さらっと書いてあります。さらっと。。
https://webpack.js.org/configuration/output/#outputenvironment
こんなのわかるわけないじゃないか！！

上記の設定をすることで、webpackがアロー関数を出力しないよう制御できるみたいです。
結果、コンパイル後のファイルを見てみると…

app.js

!function(){ ... }();

やった！　やっと関数がfunctionになったぞ！
IEで確認してみると、、
無事に動きました！！

めでたしめでたし

みなさんも、Babel導入してちゃんと設定したのにアロー関数が残っているなーと思ったら、上記設定を試してみてください。
僕みたいに無駄に格闘して消耗する被害者が減ることを願っています。