tyoshikawa1106のブログ

- Force.com Developer Blog -

webpackのチュートリアルをやってみました

Webpack

公式サイトのTutorialページを見ながらwebpackの使い方を確認しました。webpackとはgulpと同じでJSファイルなどのビルドツールとのことです。
f:id:tyoshikawa1106:20160428010625p:plain

tutorials/getting-started

webpackのインストール

次のコマンドでwebpackコマンドを利用できるようにします。

$ npm install webpack -g

f:id:tyoshikawa1106:20160428011030p:plain

動作確認用の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

f:id:tyoshikawa1106:20160428011736p:plain


これでbundle.jsを生成することができました。
f:id:tyoshikawa1106:20160428011852p:plain

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

f:id:tyoshikawa1106:20160428013447p:plain

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の追加ができました。
f:id:tyoshikawa1106:20160428014129p:plain

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

f:id:tyoshikawa1106:20160428015720p:plain


Tutorialによると『http://localhost:8080/webpack-dev-server/bundle』でも大丈夫みたいです。



チュートリアルページの内容はこんな感じでした。

サンプルコード

github.com

参考サイト

まだきちんと確認できていないのですが、Qiitaで詳しい使い方が紹介されていました。


あとこちらのブログもすごく気になる情報がまとめられていました。