[webpack] webpack 2 入門: webpack-dev-server で LiveReload & Watch 対応のサーバをたてる

webpack-dev-server を利用すると、ローカル開発用途の Node.js サーバがたてられます。

[markdown]
## Installation

webpack-dev-server をインストールします。

> * [webpack/webpack-dev-server: Serves a webpack app. Updates the browser on changes.](https://github.com/webpack/webpack-dev-server)

“`prettyprinted
% yarn add –dev webpack-dev-server
“`

## webpack.config.js

webpack.config.js の設定を読んでくれるので、追加設定なしで `http://localhost:8080/` で LiveReload, Watch 対応のサーバが起動できます。
必要に応じて `webpack.config.js` に設定を追加することができます。

> * [DevServer](https://webpack.js.org/configuration/dev-server/#devserver)

## Usage

`webpack-dev-server` で起動すると、`http://localhost:8080/` で開けることが分かります。

“`prettyprinted
% $(yarn bin)/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 498a93ee8e2c17480d68
Version: webpack 2.6.1
Time: 7199ms
Asset Size Chunks Chunk Names
vendors.js 564 kB 0 [emitted] [big] vendors
app.js 673 kB 1 [emitted] [big] app
stylesheets/style.css 22.4 kB 1 [emitted] app
index.html 288 bytes [emitted]
“`

### webpack コマンドの引数も渡せる

`webpack` コマンドの引数を渡せます。
例えば debug mode & Source Map で起動するにはこのようにします。

> * [Webpack-dev-server doesn’t generate source maps – Stack Overflow](https://stackoverflow.com/questions/32296967/webpack-dev-server-doesnt-generate-source-maps)

“`prettyprinted
% $(yarn bin)/webpack-dev-server -d –devtool source-map
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 38a65ce9360e500e99e3
Version: webpack 2.6.1
Time: 7682ms
Asset Size Chunks Chunk Names
vendors.js 674 kB 0 [emitted] [big] vendors
app.js 698 kB 1 [emitted] [big] app
stylesheets/style.css 22.5 kB 1 [emitted] app
vendors.js.map 705 kB 0 [emitted] vendors
app.js.map 829 kB 1 [emitted] app
stylesheets/style.css.map 7.63 kB 1 [emitted] app
index.html 288 bytes [emitted]
“`

> * [Add: webpack-dev-server · DriftwoodJP/sandbox-webpack@8c953c7](https://github.com/DriftwoodJP/sandbox-webpack/commit/8c953c728cb042fef27a49adb2a330913c5ec3d8)

## 補遺

> * [yarn (+ webpack) を使ってみる – Qiita](http://qiita.com/knjname/items/0cc813622e0121c05723#%E5%AE%9F%E9%9A%9B%E3%81%AB%E3%82%B3%E3%83%BC%E3%83%89%E8%BF%BD%E5%8A%A0webpack%E3%81%A7%E3%83%93%E3%83%AB%E3%83%89%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B)
> * [webpack-dev-serverの基本的な使い方とポイント – dackdive’s blog](http://dackdive.hateblo.jp/entry/2016/05/07/183335)
[/markdown]