前回の続き。以下のファイル構成になっています。
. ├── app │ └── index.coffee ├── index.coffee ├── package.json └── public └── index.jade （node_modulesは略）
webpack.config.coffee ファイルを書きましょう。設定ファイルといっても、jsonと異なり、nodejsが実行可能なjsファイル（僕はcoffeeで書きますが）なのです。非常に柔軟性に富んだ設定ができます。まずはシンプルに書いてみましょう。
#~/tutorials/project/webpack.config.coffee
module.exports=
entry: ["./index.coffee"] #最初に読むファイル（相対パスで！）
output:
path: __dirname + "/bundled" #出力先のフォルダ（絶対パスで！）
filename: "bundled.js" #出力するファイル名
module:
loaders:[
{test: /\.coffee$/, loader:"coffee"}
]
（僕はCommonJSのスタイルしか習得していないのでこう書いていますが、AMDスタイルにもwebpackは対応しています。くわしくはドキュメントを。）
こう書くと、webpackは
「./index.coffeeを読みこみ、ソースファイルを解析し、結果を./bundled/bundled.jsに吐き出す。解析中に名前が/\.coffee$/の正規表現にマッチするファイルをrequireするときにはcoffee-loaderを通してjsファイルにコンパイルしてファイルを纏めてゆく。」
という動作をします。
moduleのオプションの中に、loadersというオプションがありますね。ここで、ローダー、すなわちwebpackがモジュールをどのようにロードするかを設定します。
#coffee
{test: /\.coffee$/, loader:"coffee"}
という行（というかJS的に言えばオブジェクト）があります。これが「/\.coffee$/の正規表現にマッチするファイルをrequireするときにはcoffee-loaderを通してjsファイルにコンパイルしてファイルを纏めてゆく。」ということを言っています。
coffee-loaderというのは前回インストールしたnpmパッケージ “coffee-loader”のことです。つまりJSONをrequireしたければjson-loaderを、yamlをrequireしたければyaml-loaderを、テキストファイルをrequireしたければfile-loaderを、、、、といった具合に、いろんなloaderを使ってwebpackは一つのJSファイルにバンドルしてしまうのです。すごいです。公式のドキュメントにloaderのリストがあります。npmにもいっぱい転がっています。
このwebpack.config.coffeeで設定できるオプションは多彩です。詳しくはドキュメントを。
改めてwebpack してみます。
$ webpack
Hash: 1c86edd68ab753881b94
Version: webpack 1.13.0
Time: 160ms
Asset Size Chunks Chunk Names
bundled.js 1.54 kB 0 [emitted] main
[0] multi main 28 bytes {0} [built]
+ 1 hidden modules
今度はバンドルしてくれました。bundledフォルダに作られています。
. ├── app │ └── index.coffee ├── bundled │ └── bundled.js #<----コレ！ ├── index.coffee ├── package.json ├── public │ └── index.jade └── webpack.config.coffee
ではこれをブラウザで動かします。その前に、サーバーの返すhtmlファイルをコンパイルしておきましょう。
$ jade public/index.jade -o public
index.htmlファイルが作られました。サーバーはこのindex.htmlファイルをサーブします。
├── public │ ├── index.html │ └── index.jade
サーバーの挙動もセットアップしておきましょう。webpack.config.coffeeにいくつかのオプションを追加します：
#~/tutorials/project/webpack.config.coffee
module.exports=
entry: ["./index.coffee"]
output:
path: __dirname + "/bundled"
filename: "bundled.js"
#webpack-dev-serverがサーブする、バンドルされたJSファイルのURLのルートを指定
publicPath: "http://127.0.0.1:3000/assets/"
#webpack-dev-serverの設定
devServer:
contentBase: "./public" #相対パス！
host: "127.0.0.1"
port: 3000
module:
loaders:[
{test: /\.coffee$/, loader:"coffee"}
]
サーバーを起動してみましょう。webpack-dev-serverコマンドを打てばOK.
$ webpack-dev-server
すると、、、
$ webpack-dev-server
http://127.0.0.1:3000/webpack-dev-server/
webpack result is served from http://127.0.0.1:3000/assets/
content is served from ./public
Hash: 3fe70e59b1eb7c75c588
Version: webpack 1.13.0
Time: 210ms
Asset Size Chunks Chunk Names
bundled.js 1.57 kB 0 [emitted] main
chunk {0} bundled.js (main) 64 bytes [rendered]
[0] multi main 28 bytes {0} [built]
[1] ./index.coffee 36 bytes {0} [built]
webpack: bundle is now VALID.
expressサーバーのデーモンが起動しました。
最初に、
http://127.0.0.1:3000/webpack-dev-server/ webpack result is served from http://127.0.0.1:3000/assets
とあります。サーバーのURLはhttp://127.0.0.1:3000/webpack-dev-server/で、バンドルされたjsファイルはhttp://127.0.0.1:3000/assetsからサーブされますよ、という意味です。
先ほどのindex.htmlには以下のタグが含まれているので、
<script src="http://127.0.0.1:3000/assets/bundled.js" async>
ブラウザからhttp://127.0.0.1:3000/webpack-dev-server/にアクセスすると、DOMの構築が終わった時点（async属性！）でbundled.jsが読み込まれ、無事に$("body").append...を実行してくれるはずです。
では試しにChromeブラウザからアクセスしてみます。
あれ、、、「こんちは！」がでてこない！！
コンソールで確認すると、、、「ReferenceError: $ is not defined」とあります。
$が定義されていない、とのこと。どうやらjQueryを読み込むのを忘れたようです。読み込みましょう。
。。。長くなってしまうので、次の記事に！
