webpack のチュートリアルをやってみる


[大鑑巨砲主義らしく](https://speakerdeck.com/ahomu/front-end-with-node-dot-js-tools)いろいろな機能があるみたいだけど、とりあえずサラッとチュートリアルをやってみる。

## webpack インストール

```
$ npm install webpack -g
```

## ファイルを作成その１

```
$ mkdir tutorial
$ cd tutorial
$ emacs entry.js
```

```javascript
document.write("It works.");
```

```
$ emacs index.html
```

```html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>webpack tutorial</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>
```

### コンパイルしてバンドルするファイルを作成する

```
$ webpack ./entry.js bundle.js
```

ブラウザで index.html を表示

> ![スクリーンショット 2014-11-28 0.32.19.png](https://qiita-image-store.s3.amazonaws.com/0/41656/0c60b631-7eb8-68e6-ab74-37a043bec2bf.png "スクリーンショット 2014-11-28 0.32.19.png")


## ファイルを作成その2
```
$ emacs content.js
```

```javascript
module.exports = "It works from content.js.";
```

entry.js を修正する

```
$ emacs entry.js
```

```javascript
document.write(require("./content.js"));
```

再コンパイルする

```
$ webpack ./entry.js bundle.js
```

ブラウザで index.html を表示

> ![スクリーンショット 2014-11-28 0.36.55.png](https://qiita-image-store.s3.amazonaws.com/0/41656/bb18d5fb-a296-758b-48f8-e0c247ec36f0.png "スクリーンショット 2014-11-28 0.36.55.png")


## ローダーを使う

インストール

```
$ npm install css-loader style-loader
```

ファイル作成

```
$ emacs style.css
```

```css
body {
    background: yellow;
}
```

entry.js を修正する

```
$ emacs entry.js
```

```javascript
require("!style!css!./style.css");
document.write(require("./content.js"));
```

再コンパイルする

```
$ webpack ./entry.js bundle.js
```

ブラウザで index.html の表示

> ![スクリーンショット 2014-11-28 0.46.05.png](https://qiita-image-store.s3.amazonaws.com/0/41656/bdf2ec5e-1e10-b615-24bf-f9d02f275523.png "スクリーンショット 2014-11-28 0.46.05.png")

### `require("./style.css")` と書けるようにする

entry.js を修正する

```
$ emacs entry.js
```

```javascript
require("./style.css");
document.write(require("./content.js"));
```

オプションを付けて再コンパイルする

```
$ webpack ./entry.js bundle.js --module-bind 'css=style!css'
```

ブラウザで index.html の表示

> ![スクリーンショット 2014-11-28 0.46.05.png](https://qiita-image-store.s3.amazonaws.com/0/41656/bdf2ec5e-1e10-b615-24bf-f9d02f275523.png "スクリーンショット 2014-11-28 0.46.05.png")


## 設定ファイルを書いて `webpack` コマンドのみで再コンパイル

```
$ emacs webpack.config.js
```

```javascript
/* global module, __dirname */

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};
```

### コンパイルする

```
$ webpack
```

### オプションでプログレスバーや色づけ表示

```
$ webpack --progress --colors
```


![スクリーンショット 2014-11-28 0.52.37.png](https://qiita-image-store.s3.amazonaws.com/0/41656/ffa61110-8033-f973-b249-48226ffef6ef.png "スクリーンショット 2014-11-28 0.52.37.png")

### ファイルを監視してコンパイルを自動化

```
$ webpack --progress --colors --watch
```


## 開発サーバ

`--watch` でファイル監視ではなく、開発サーバを起動してコンパイル自動化もできる。

インストール

```
$ npm install webpack-dev-server -g
```

開発サーバ起動

```
$ webpack-dev-server --progress --colors
```

- [http://localhost:8080/webpack-dev-server/]()

## 次は

- [ソースコードにあるサンプル](https://github.com/webpack/webpack/tree/master/examples)
- [公式ドキュメント](http://webpack.github.io/docs/)


## 参考リンク

- [http://webpack.github.io/]()
  - [webpack tutorials/getting-started](http://webpack.github.io/docs/tutorials/getting-started/)
- [Front-end with Node.js Tools](https://speakerdeck.com/ahomu/front-end-with-node-dot-js-tools)

> 大鑑巨砲主義
> 設定はもちろん分厚くなるが、分割ビルドは魅力的

- [RequireJS等はもう古い。WebPackとは？](http://ameblo.jp/ca-1pixel/entry-11884453208.html)

> 【第1部】CommonJSの簡単なサンプル
> 【第2部】Bootstrapを使ったサンプル
> 【第3部】AngularJSのサンプル
> 【第4部】CoffeeScriptやLESS、Jadeを使ったサンプル
> 【第5部】コードスプリット
> 【第6部】production/develが最適化されたサンプル
> 【第7部】EcmaScript 6のサンプル

- [BrowserifyからWebpackへの移行時の注意点](http://qiita.com/derui@github/items/5233b4ef8fbde1e80d33)

> Webpackの特徴としては、
> - コード分割
> - requireの使い方で、AMDのような非同期のロードもサポート
> - Loaderという読み込み時に適用するプラグイン
> - require時に変数が入っていてもパースできるような、賢いパース
> - Pluginによる拡張

> Browserifyが 単一ファイル を作成するのに特化していたのと比較して、Webpackは 複数ファイルを出力すること を念頭に置いている

> 一回（もしくはwatchの初回）のビルド時間
> Browserify => 3〜4分
> Webpack => 14〜16秒（！）