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

公開日: 2017/06/09
更新日: 2018/10/03

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

Contents

Installation

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

% yarn add --dev webpack-dev-server

webpack.config.js

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

Usage

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

% $(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 で起動するにはこのようにします。

% $(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]

補遺