webpack-serve が v1 になっていた
webpack-serve が ^1.0.0
になっていました。
少し触ってみたので、気づいた点について書いていきます。 (以下は v1.0.2 時点の内容になります)
mode
の扱い
以前書いた以下の記事で、webpack-serve は webpack.config.js
で関数で設定を記述する方法を非推奨としているので、webpack 4 から導入された --mode
を設定ファイル内で参照する方法が無いと記述していました。
この mode
の扱いですが、現在は README に記載されているように WEBPACK_SERVE
という環境変数を参照して切り替える方法が示されています。
{ mode: process.env.WEBPACK_SERVE ? 'development' : 'production', }
webpack 4 を使っていて気づいたのですが、設定ファイルの mode
は、webpack-cli を用いている場合 webpack --mode production
のように CLI オプションが優先されるようです。
つまり { mode: "development" }
と固定値にしていても webpack --mode production
というコマンドを実行すれば、production mode でビルドされます。
(わざわざ args
から --mode
の値を取得する必要は無さそうです)
自動リロード(HMR を含む)について
webpack-serve では webpack-hot-client を用いて WebSocket を使ったリロードが行われます。
自動リロードがされない場合がある
しかし webpack-serve を使っていて、ソースコードを変更しても自動リロードがされないことがありました。
WebSocket connection to 'ws://localhost:8081/' failed: Error during WebSocket handshake: Unexpected response code: 200
調べてみたところ、以下のように serve.config.js
(webpack-serve の設定ファイル)に host: "127.0.0.1"
のように IP アドレスを指定すると動作しました。
( host
のデフォルト値は localhost
です)
module.exports = { host: "127.0.0.1", // "::1" でも可 };
webpack-serve が内部で使っている webpack-hot-client は WebSocket サーバを立てる際に ws というライブラリを用いています。
該当行: webpack-hot-client/index.js at v3.0.0 · webpack-contrib/webpack-hot-client · GitHub
また、この WebSocket サーバへ接続するクライアントはブラウザの WebSocket
を直接用いているようです。
該当行: webpack-hot-client/socket.js at v3.0.0 · webpack-contrib/webpack-hot-client · GitHub
webpack-serve のコードを追っていくと分かりますが、サーバとクライアント双方に host
の値が渡されるため、恐らく ws とブラウザの WebSocket
で "localhost"
を渡した際に IPv4 か IPv6 の解釈のずれが生じてしまうと WebSocket サーバへの接続に失敗し、自動リロードが機能しないのでは無いかと思われます。
まとめ
- webpack-serve が v1 になりました
mode
については webpack-serve でも問題無さそう- WebSocket 周りの注意が必要そう