webpackでbabel際はnode_modulesをexcludeし忘れるべからず

コンパイル早いし複数のJSエントリーポイント設定するのも簡単だしということで1年ぐらい前からwebpack使ってます。
なのに簡単なところでつまずいてしまったので恥を忍んで一筆。

結論から述べるとタイトルが全てです。
webpackとbabel-loaderでES2015のコードを扱う場合、node_modules をexcludeしないと正常に動作するJSにコンパイルされないのでブラウザで読み込んだときにエラーが出てしまいます。

現象再現できる環境を以下のリポジトリに用意しました。
暇な人興味のある方はお試しあれ。
https://github.com/haribote/do-not-miss-excluding-node-modules

正しい設定

正常に動作するJSにコンパイルさせるための設定は以下の通りです。
何のことはなくて、JS（およびそれに準ずる）ファイルのローダー設定に exclude: /node_modules/ を忘れずに指定すること。
もちろん node_modules 以外に除外すべき対象があるならば列記が必要です。

// import modules
var path    = require('path');
var webpack = require('webpack');

/**
 * Configuration of webpack
 */
module.exports = {
  context: __dirname + '/src',
  entry  : [
    './main.js'
  ],
  output : {
    path    : path.resolve(__dirname, 'dist'),
    filename: './bundle.js'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module : {
    loaders: [
      {
        test   : /\.js$/,
        loader : 'babel-loader',
        exclude: /node_modules/, // <- Don't miss it!
        query  : {
          plugins: ['transform-runtime'],
          presets: ['es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js']
  }
};

補則

今回作成したサンプルでは、main.js で Promise を呼び出しています。
そのためbabelの transform-runtime¹ がpolyfillを差し込んでくれるわけですが、 node_modules をexcludeしないとこういったpolyfillやライブラリがブラウザで動作するコードとして出力されなくなってしまいます。

1. おなじくcore-jsを用いる babel-polyfill でも今回と同様の結果になる ↩