前回に続いてwebpack-dev-serverを使ってみたので、記録として残します。

webpack-dev-serverって何？

webpackを使用したライブリロードが可能な開発サーバのこと。
TypeScriptやHTMLファイルを編集後に動作確認をする場合、ビルドしてJSファイルやHTMLファイルをHTTPサーバにデプロイする作業しないといけない。
非常に手間です。
そのような時に、webpack-dev-serverを使用することでHTTPサーバにデプロイせずに動作確認をすることが可能です。
ライブリロードと書いてある通り、勝手に変更したファイルをビルドして取り込んでくれます。

github.com

webpack-dev-serverを使うための準備

webpack-dev-serverのパッケージをインストールする必要があるので、インストールする。

webpack-dev-serverをインストール

npmの場合

$ npm install webpack-dev-server --save-dev

yarnの場合

$ yarn add -D webpack-dev-server

webpack.config.jsを編集する

webpack.config.jsにwebpack-dev-serverの定義を追加する。
contentBaseオプションは、コンテンツをどこのパスから提供するのかを指定します。
静的ファイル(HTML)を使用する場合に必要なオプションです。
パスを指定する際は、絶対パスで指定してください。

var path = require('path');

module.export = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
  }
};

実行方法

webpack.config.jsのあるディレクトリでコマンドを実行します。
devServerにオプションを設定していない場合、8080ポートで起動します。

$ node_modules/.bin/webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/xxxxx/todoapp/dist
ℹ ｢wdm｣: Hash: f9f8e68db3eb6398ec96
...........
...........

Webブラウザも一緒に起動する場合は、--openオプションを付ける。

$ node_modules/.bin/webpack-dev-server --open

リモートサーバで起動するには、hostオプションが必要になる

VSCodeのRemoteプラグインを使って、リモートサーバでコーディングしている場合、 webpack-dev-serverもリモートサーバで動作することになる。
その場合、localhostで起動されVSCodeを起動しているクライアントからアクセスできない。
外部からのアクセスを可能とするために、hostオプションが必要になる。

var path = require('path');

module.export = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    host: "xxx.xxx.xxx.xxx",
  }
};

コマンドのオプションで指定することも可能。

$ node_modules/.bin/webpack-dev-server --host xxx.xxx.xxx.xxx

他にもいろいろなオプションがあるので、参照してみると良い。

webpack.js.org

scriptsに登録しておこう

頻繁に使うことになるコマンドなので、忘れずにpackage.jsonのscriptsに記述しておこう。

"scripts": {
  "start:dev": "node_modules/.bin/webpack-dev-server --open"
},

まとめ

フロントエンドのフの字も知らない私にとってライブリロードできる開発用サーバがあるのはバグを作っては直してを繰り返すことになるので、非常に心強い相棒ではないかと思う。
オプションもたくさんあり、本番環境に近い状態で試験が出来るのではなかろうか。
他のオプションも使う機会があったら、また記録として残そうと思う。