前提：
- javascriptはCoffeeScriptで
- cssはsassで
- フレームワークはBackbone.js
- テンプレートエンジンはjade(今はpugに改名したようですが)
- ユニットテストはmocha+power-assert+karmaの組み合わせ
この人たちを束ねてくれるのが、webpack、というわけです。ではスタート！
まずnodejs, npmの環境をチェック。ともあれ、最新が望ましいでしょう。
~$ node --version
v4.4.3
~$ npm --version
2.15.1プロジェクトのフォルダを作成
~$ mkdir -p tutorials/project && cd tutorials/project
プロジェクトはnpm パッケージとします
$ npm init #（全てリターンでOK）
次に簡単なアプリケーションを作成してみます。
$ mkdir app && cd app
ブラウザにテキストを表示させる超単純もの。アプリケーションのフォルダにindex.coffeeを作って、そこにbodyタグにh1を追加する関数をmodule.exportsにアサインします。
#~/tutorials/project/app/index.coffee
module.exports= ->
$("body").append """
<h1>こんちは！</h1>
"""
module.exportsにアサインするのは、この関数をCommonJSの仕様に従ってモジュール化するためです。これをトップレベルのコードから利用します。
webpackについてる開発サーバーを使うので、そのサーバーのルートフォルダを作っておきます。
~/tutorials/project$ mkdir public
そのサーバーの返すhtmlは、jadeで書いておきます。
#~/tutorials/project/public/index.jade
doctype html
html(lang="ja")
head
//- async属性を入れておく！
script(src="http://localhost:3000/assets/bundled.js" async)
body
次にnpmパッケージをインストールします。まずは最低限のものを。
$ npm i -D coffee-script jquery underscore backbone jade
ではwebpackをインストール。webpackはさまざまな機能をnpmパッケージとして追加することで威力を発揮します。なので、それらも併せてインストール。
下のcoffee-loader, jade-loaderというのは.coffeeファイル、.jadeファイルを「バンドル」してくれる「ローダー」と呼ばれるwebpack用のnpmパッケージです。
$ npm i -D webpack #webpack本体 $ npm i -D webpack-dev-server #開発用サーバー $ npm i -D coffee-loader jade-loader #ローダー
バンドル時に使うwebpackコマンドはnode_modulesフォルダの下にもぐっているので、あらかじめパスを通しておきます（既に通っている場合は不要）
$ export PATH=./node_modules/.bin:$PATH
ルートフォルダにwebpackが最初に読み込むファイルを作っておきます。名前をindex.coffeeとしておきます。このファイルには、ブラウザがトップレベルで実行するコードも書きます。
#~/tutorials/project/index.coffee
do require("./app/index.coffee") #読み込まれたモジュールを実行する
僕は、最初なかなか感じが掴めなかったのですが、appフォルダ以下のコードは、すべてモジュールとしてカプセル化することになります。CommonJSの仕様に従って、webpackがこのトップレベルのコードからモジュールを全て辿ってrequireしていくわけです。ブラウザはrequireできないので、webpackで事前に必要なモジュールを全てバンドルしておく必要があるのです。
なお、このコードはwindow.onload(function()…)でラップする必要はありません。スクリプトはhtmlの中でasyncで読み込みますので、DOMが構築されるタイミングをJSで調整する必要はありません。
これで環境は整った感じです。インストールも済んだしパスも通ったことですので、webpackを起動してみましょう。index.coffeeがappフォルダのファイルを読み込み、その結果をブラウザが解釈できるjsファイルとして出力してくれるはずです。
$ webpack
すると、、、
$ webpack webpack 1.13.0 Usage: https://webpack.github.io/docs/cli.html Options: --help, -h, -? --config --context --entry --module-bind --module-bind-post --module-bind-pre （以下略）
、、、これでは動かないのです。それもそのはずで、まだ、webpackの挙動をきちんと設定していません。上の結果はwebpack --helpと同じで、コマンドラインオプションのリストです。これらオプションを入れればよいのですが、微に入り細にいたるまで設定してこそwebpackの威力を発揮できます。設定ファイルを書きましょう。webpackコマンドはデフォルトでカレントディレクトリのwebpack.config.coffeeを読みますので、次の記事で！
