webpack から Babel を使う設定

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 の文法で書いたコードを以前の文法に変換してくれます。

参考

最終更新日: 2015-08-23

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*