webpack の内部で Babel をロードさせて JavaScriptのコードを自動変換させるための設定をメモします。

この設定を行うことにより、webpack が JavaScriptファイルを読み込んだ時に、勝手に ECMAScript 6 の文法を以前の文法に変換してくれるようになるので、普段 開発者の書くコードに ECMAScript 6 の文法を用いることができます。

手順

babel-loader という npmモジュールを導入して、webpack の設定でこのモジュールを使うよう記述するだけです。

1. babel-loader をインストールする

babel-loader をインストールします。これは、webpack から Babelを読み込むためのローダーです。

$ npm install --save-dev babel-loader

2. webpackに設定を記述する

webpackの設定ファイル（例：webpack.config.js）に、先程インストールしたBabel用ローダーを有効にする設定を記述します。設定ファイルを使っていない場合は、これと同じ内容を設定オプションに指定すればよいでしょう。

{
    ...
    module: {
       loaders: [
         {
           test: /\.jsx?$/,
           exclude: /(node_modules|bower_components)/,
           loader: 'babel'
         }
       ]
    },
    ...
}

• JavaScriptファイルの拡張子として、.js と .jsx を設定しています。
• node_modules ディレクトリと bower_components ディレクトリ内のファイルは対象外としています。

以上の手順だけで、webpackが JavaScriptファイルを読み込む時に Babel を使って ECMAScript 6 の文法で書いたコードを以前の文法に変換してくれます。

参考

• webpack - loaders
  • http://webpack.github.io/docs/loaders.html
• webpack - configuration
  • http://webpack.github.io/docs/configuration.html#module-loaders

最終更新日: 2015-08-23