Webpack.dllPluginでバンドルしたファイルをIE11で使ったらシンタックスエラーで怒られた時の設定

設定ファイル

先に結果として、だいたいこんなです。

webpack.dll.config.babel.js

import webpack from 'webpack';
import {dependencies} from './package';

export default {
  entry: {
    vendor: dependencies
  },
  output: {
    path: '/output/path',
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // node_modules内のファイルも基本的にloaderを通す
        exclude: [
          // loaderを通すとそれはそれでエラーを吐くようになったので除外
          /node_modules\/disposables\//,
          // loader通しても通さなくても良さそうなので除外
          /node_modules\/react.*\//,
          /node_modules\/lodash.*\//
        ],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  'env',
                  {
                    targets: {
                      // IE11, ...
                      browsers: ['last 1 version']
                    }
                  }
                ]
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DllPlugin({
      context: __dirname,
      path: './[name]-manifest.json',
      name: '[name]_library'
    })
  ]
};

背景

会社に入って早速そこそこ大きいプロジェクトに入りました。Webpackの設定が古くて遅かったので、色々やった内の1つとしてdllで先に作ってしまう方法も導入しました。
ところが、バグチェックする時IE11がシンタックスエラーを吐いて確認すらできない状態でした。だけど、依存パッケージ（幾つか良くわからない、使ったことない）が多くどれが原因を起こしているパッケージなのか分からないのと、別のパッケージで置き換えるのも嫌だ！と思いました。（時間もないし）

解決

エラーログを見たら確かに() => {}とかありました。
そこで、「こっちもbabelで変換しちゃえば良いいんじゃね？（そもそも通せるのか）
」と思ったのでbabel-preset-envなbabel-loaderを通すようにしてみました。

無事通ってはくれましたが、すべてをポイッっと通すと、それはそれで別のエラーを吐くようになってしまいました。これは、その都度Rule.excludeでそのファイルを除外するなどの設定が必要でした。また、明らかに大丈夫だろうというパッケージまで通してるとファイルサイズが大きくなってしまうので、そういうパッケージも除くようにしたほうがいいと思います。

とりあえずIE11でもエラーを吐かないようにできました😇

参照

1. webpackのDLLバンドルを使ってビルドを速くする