公式サイトのTutorialページを見ながらwebpackの使い方を確認しました。webpackとはgulpと同じでJSファイルなどのビルドツールとのことです。
webpackのインストール
次のコマンドでwebpackコマンドを利用できるようにします。
$ npm install webpack -g
動作確認用のHTMLとJSを用意
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>ビルド実行
次のコマンドでentry.jsを元にbundle.jsファイルとして生成します。
$ webpack ./entry.js bundle.js
これでbundle.jsを生成することができました。
2つのJSファイルを1つにまとめる
content.js
module.exports = "It works from content.js.";
entry.js
document.write(require("./content.js"));※index.htmlは変更なし
これで先程と同じようにビルドするとcontent.jsを読み込んだ処理が利用できるのを確認できます。
$ webpack ./entry.js bundle.js
CSSの追加(css-loader & style-loader)
次のコマンドを実行してcss-loader & style-loaderを利用できるようにします。
npm install css-loader style-loader
style.css
body {
background: yellow;
}entry.js
require("!style!css!./style.css");
document.write(require("./content.js"));
これでビルドコマンドを実行できます。
$ webpack ./entry.js bundle.js
無事にCSSの追加ができました。
CSSの追加(BINDING LOADERS)
『require("!style!css!./style.css");』という書き方はもっとシンプルにできます。
entry.js
require("./style.css");
document.write(require("./content.js"));
『 --module-bind 'css=style!css'』というオプションをつけて対応します。
$ webpack ./entry.js bundle.js --module-bind 'css=style!css'
webpackの設定ファイル
設定ファイルを用意することでコードがスッキリします。
webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
設定ファイルを用意すればビルドコマンドは次のようになります。
$ webpack
ビルド実行中のプログレスバー
プロジェクトが大きくなるとビルド処理に時間がかかるようになります。次のコマンドでプログレスバーを表示できるようになります。(進捗状況が%で表示されるようになります。)
$ webpack --progress --colors
Watchオプションをつかったファイル監視
『--watch』オプションをつけるとファイルの監視ができます。変更時に自動でビルド処理が実行されます。
$ webpack --progress --colors --watch
開発用サーバの起動
webpack-dev-serverをインストールします。
npm install webpack-dev-server -g
次のコマンドでローカルサーバーを起動することができます。
$ webpack-dev-server --progress --colors
Tutorialによると『http://localhost:8080/webpack-dev-server/bundle』でも大丈夫みたいです。
チュートリアルページの内容はこんな感じでした。
サンプルコード
参考サイト
まだきちんと確認できていないのですが、Qiitaで詳しい使い方が紹介されていました。
- webpack で始めるイマドキのフロントエンド開発 - Qiita
- webpack のチュートリアルをやってみる - Qiita
- webpackを使ってsassをコンパイルできるようにしよう！ - Qiita
- 【意訳】Webpackの混乱ポイント - Qiita
あとこちらのブログもすごく気になる情報がまとめられていました。