npm install webpack -g
npm install -D babel-loader babel-core babel-preset-es2015
npm install -D stylus-loader@1.6.1

webpackコマンドだけグローバルでインストールします。babelはbabel-preset-es2015と必要なファイルが分割されるようになったらしいので別途インストール。これがないと、export defaultなどの記述でエラーが出ます。

プリセットは入れるだけではだめでプロジェクトのルートに.babelrcを作り設定しないといけません。webpackに書くわけではないので注意。ここで詰まりました。

babelrc

{
  "presets": ["es2015"]
}

stylus-loaderは2.0.0だと下記のエラーが出ます。同じ症状がissueで挙げられていました。1.6.1を使えばエラーを回避することができます。

webpackと打てば、プロジェクトルートにあるwebpack.config.jsが読み込まれます。下記の通りに設定しました。

module.exports = {
  entry: {
    app: ["./src/entry.js"]
  },
  output: {
    filename: "build/[name].js"
  },
  devtool: "#source-map",
  moudle: {
    loaders: [
      {test: /\.js$/, loader: "babel", exclude: /node_modules/},
      {test: /\.coffee$/, loader: "coffee"},
      {test: /\.css$/, loader: "style!css"},
      {test: /\.styl$/, loader: "style!css!stylus"}
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.coffee', '.css', '.styl']
  }
};

cssや画像もモジュールとしてrequireできます。cssはbundle.jsに文字列として書き込んで動的にHTMLに挿入してくれるみたいです。画像も出来るのは驚きました。今回は下記のようなentry.jsを作って試してみました。

require('style!css!../styles/style');
require('style!css!stylus!../styles/style.styl');

var Person = require('./person'),
    Food   = require('coffee!./food'),
    Car    = require('babel!./car.js').default;

var mike  = new Person('Mike', 18),
    rice  = new Food('Rice'),
    lapin = new Car('Lapin');

console.log(mike.hello());
console.log(rice.sell(80));
console.log(lapin.move(800));