あざらし備忘録。

渋谷ではたらく音ゲー大好きウェッブエンジニアがいろいろ思った事やった事を書いていくブログです

webpackを試してみた[JavaScript][webpack][超入門]

今回はjsを触っていて「requireとかってどうやってやるんだろう」とか「依存関係とかってどういう風に付き合っていくんだろう」と思って調べてみたらwebpackに行き着いたので、とりあえず使ってみたメモとして。

よく並んで耳にする BrowserifyRequireJS との比較は今回は行いませんmm (webpackが初めてなので!mm)

とりあえずwebpackが最後発というのはわかった。

webpackとは

JavaScript用のモジュール管理ツールです。

リソースの依存関係を解決して、複数ファイルをまとめたファイルを生成することができます。

コンパイルができるイメージでしょうか。

https://webpack.github.io/assets/what-is-webpack.png

jsだけでなく、cssや画像なども扱う事が可能なようです。

Symfony2を使っているので話を出すと、Symfony2でいうところのassets的な感じですかね〜。

なんとなく便利そうなのはわかったので使ってみる

インストール

簡単インストール。

npm install webpack --save-dev

チュートリアル

公式のやつをなぞって試してみます。

tutorials/getting-started

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をブラウザで見てみると...?

f:id:shiro_goma:20150816192426p:plain

おぉ〜。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 を見てみると...?

f:id:shiro_goma:20150816193211p:plain

おぉ〜なるほど。ちゃんと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"));

このように、ローダーを用いるときは!区切りで記述をします。

stylestyle-loaderを、csscss-loaderを表しています。

もちろんstyle-loaderのようにフルネームで書いても大丈夫です。

f:id:shiro_goma:20150822161630p:plain

ローダーを紐付けてビルドする

ビルド時にファイルの拡張子とローダーを紐付けることもできます。

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をビルドしながら操れるようになりました。これはハッピーになれそうですね!

導入までしんどい事がないので積極的に使っていこうとおもいます。

参考

今回のチュートリアルで触れた部分のコードはこちら。

github.com