webpack + Babel + React(ES2015使用)の設定

やりたいこと。 * ReactをJSXを使用して書きたい。 * EcmaScriptの構文も使用して書きたい * .jsファイルと、.jsxファイルに変更があった場合自動的にビルドしてほしい。 * 自動的にソースマップも出力してほしい。

webpack.config.js

// コマンドメモ
// -p : minify
// --watch : ファイルの変更を監視　ビルドの自動化
// $ webpack -p --progress --colors --watch

var path = require('path');
var webpack = require('webpack');

module.exports = {
    // エントリーポイント
    entry: './script/src/main.jsx',
    // ソースマップ出力
    devtool: "#source-map",
    // 出力先設定
    output: { 
        path: __dirname,
        filename: './script/dest/bundle.js' 
    },
    module: {
        loaders: [
            // .jsxファイル用
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            // .jsファイル用
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    resolve: {
        // ここに登録した拡張子は import時に省略できる
        extensions: ['', '.js', '.jsx']
    }
};

以下のコマンドで実行

$ webpack -p --progress --colors --watch