webpackを試してみた[JavaScript][webpack][超入門]
今回はjsを触っていて「requireとかってどうやってやるんだろう」とか「依存関係とかってどういう風に付き合っていくんだろう」と思って調べてみたらwebpackに行き着いたので、とりあえず使ってみたメモとして。
よく並んで耳にする Browserify
や RequireJS
との比較は今回は行いませんmm (webpackが初めてなので!mm)
とりあえずwebpackが最後発というのはわかった。
webpackとは
JavaScript用のモジュール管理ツールです。
リソースの依存関係を解決して、複数ファイルをまとめたファイルを生成することができます。
コンパイルができるイメージでしょうか。
jsだけでなく、cssや画像なども扱う事が可能なようです。
Symfony2を使っているので話を出すと、Symfony2でいうところのassets的な感じですかね〜。
なんとなく便利そうなのはわかったので使ってみる
インストール
簡単インストール。
npm install webpack --save-dev
チュートリアル
公式のやつをなぞって試してみます。
webpackの超基本的な使い方
jsファイルとしてentry.js
を、htmlファイルとしてindex.html
をそれぞれ作成します。
entry.js
document.write("It works.");
index.html
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
html内でbundle.js
というファイルが読み込まれていますね。知らない子ですね。
このbundle.js
がwebpackを用いてビルドされたjsファイルとなります。実際にビルドしてみましょう。
ビルド
webpack ./entry.js bundle.js
bundle.jsが生成されました!この状態でindex.htmlをブラウザで見てみると...?
おぉ〜。It works.
の文字。いい話。
これでentry.js
以外にもファイルが増えたとてbundle.js
を読み込んでいれば勝手に反映されそうなので変更が楽で良さそうですね。
以上でとりあえずのwebpackの使い方はわかりました。
entry.jsが依存しているファイルを増やしてみる
依存解決を試してみましょう。
content.js
を追加し、それを entry.js
内で読み込むようにしてみます。
content.js
module.exports = "It works from content.js.";
entry.js
document.write(require("./content.js"));
ビルド
webpack ./entry.js bundle.js
index.html
を見てみると...?
おぉ〜なるほど。ちゃんとcontent.js
で書かれた内容が表示されていますね。
依存関係をよしなに解決して動作させてくれています。素晴らしい!
ローダーを使ってみる
ローダー
webpackは、ローダーを追加してあげることで、jsの他にもcssなど、様々なファイルをビルド対象に取ることができます。
このローダーを使う例として、cssファイルをビルドに含めるようにしてみましょう。
ローダーの追加
ローダーの使い方一歩目
npm install css-loader style-loader --save-dev
cssを読み込むために必要なcss-loader
と、cssをスタイルに適用するためのstyle-loader
の2つをインストールします。
先ほどの例を、cssを用いるように変更してみましょう。
style.css
body { background: yellow; }
entry.js
require("!style!css!./style.css"); document.write(require("./content.js"));
このように、ローダーを用いるときは!
区切りで記述をします。
style
がstyle-loader
を、css
がcss-loader
を表しています。
もちろんstyle-loader
のようにフルネームで書いても大丈夫です。
ローダーを紐付けてビルドする
ビルド時にファイルの拡張子とローダーを紐付けることもできます。
webpack ./entry.js bundle.js --module-bind "css=style\!css"
この場合は読み込み時の記述は以下の様で大丈夫です。
entry.js
require("./style.css"); document.write(require("./content.js"));
コンフィグファイルを用いる
設定ファイルを用いてビルドすることもできます。
設定ファイルにはビルド対象のファイル(entry.js
)や、出力先のファイル(bundle.js
)だったり、ローダーのような設定を記述することもできます。
webpack.config.js
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };
設定ファイルを記述した場合は、ビルド実行はwebpack
だけでOKです。
webpack
ファイル変更を検知して自動ビルドする
webpackのビルド時に --watch
オプションを付けることで変更された時に自動的に再ビルドが走るようにもできます。
webpack --watch
このようにとても簡単にjsをビルドしながら操れるようになりました。これはハッピーになれそうですね!
導入までしんどい事がないので積極的に使っていこうとおもいます。
参考
今回のチュートリアルで触れた部分のコードはこちら。