webpack-serve が v1 になっていた

webpack-serve^1.0.0 になっていました。

www.npmjs.com

少し触ってみたので、気づいた点について書いていきます。 (以下は v1.0.2 時点の内容になります)

mode の扱い

以前書いた以下の記事で、webpack-serve は webpack.config.js で関数で設定を記述する方法を非推奨としているので、webpack 4 から導入された --mode を設定ファイル内で参照する方法が無いと記述していました。

yami-beta.hateblo.jp

この mode の扱いですが、現在は README に記載されているように WEBPACK_SERVE という環境変数を参照して切り替える方法が示されています。

{
  mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
}

webpack 4 を使っていて気づいたのですが、設定ファイルの mode は、webpack-cli を用いている場合 webpack --mode production のように CLI オプションが優先されるようです。

www.npmjs.com

つまり { mode: "development" } と固定値にしていても webpack --mode production というコマンドを実行すれば、production mode でビルドされます。 (わざわざ args から --mode の値を取得する必要は無さそうです)

自動リロード(HMR を含む)について

webpack-serve では webpack-hot-client を用いて WebSocket を使ったリロードが行われます。

npmjs.com

自動リロードがされない場合がある

しかし 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

www.npmjs.com

webpack-serve のコードを追っていくと分かりますが、サーバとクライアント双方に host の値が渡されるため、恐らく ws とブラウザの WebSocket"localhost" を渡した際に IPv4IPv6 の解釈のずれが生じてしまうと WebSocket サーバへの接続に失敗し、自動リロードが機能しないのでは無いかと思われます。

まとめ

  • webpack-serve が v1 になりました
  • mode については webpack-serve でも問題無さそう
  • WebSocket 周りの注意が必要そう

webpack-dev-server の後継らしい webpack-serve について調べた

追記(2018-09-19)

webpack-serve が DEPRECATED となり webpack-dev-server の利用が推奨されています。
README には

DEPRECATED. Please use webpack-dev-server (he is in support and update mode again). Feel free to create a issue if some features are not implemented in webpack-dev-server.

との記載があるので、webpack-dev-server の開発が再開したようです。

DEPRECATED となった理由についても記載されているので、興味のある方は GitHubリポジトリを御覧ください。
webpack-serve/README.md at edaf28c6c935c3e29d26dbb02a9d6b672cc5148a · webpack-contrib/webpack-serve · GitHub

追記(2018-05-20)

webpack-serve が v1.0 になったので、以下の記事を書きました。

yami-beta.hateblo.jp


開発用サーバとして使われている webpack-dev-server ですが、README に記載されているようにメンテナンスモードに入っています。

Please note that webpack-dev-server is presently in a maintenance-only mode and will not be accepting any additional features in the near term.

github.com

同じく README には webpack-serve へのリンクがあり、こちらが後継の開発サーバのようです。

github.com

webpack-serve

(以下は v0.2.0 時点の情報です)

webpack-serve は webpack-dev-server と同じく開発用サーバですが WebSocketkoa-static を用いている部分が特徴です。
webpack-serve 自体に機能を持たせるのではなく Add-on という形で、外から必要な機能を追加していく形式になっており docs/addons に幾つかの設定ファイルのサンプルが用意されています。

webpack-serve は CLI からもスクリプトとしても利用できるようになっています。
CLI から用いる場合、以下のように webpack の設定ファイルを明示的に指定する必要があります。
設定ファイルを指定しない場合は、webpack 4 と同様に no config でのビルドを行います。

{
  "scripts": {
    "serve": "webpack-serve --config webpack.config.js"
  }
}

また、webpack-serve 用の設定を記述する方法も複数用意されています。
webpack-contrib/webpack-serve#webpack-serve-config

webpack-serve を試して気になったこと

webpack では設定ファイルの記述方法として function を用いることが出来ますが、webpack-serve では v0.2.0 時点で非推奨となっています。
(この理由も README 内に記載されています)

module.exports = (env, argv) => {
  return {
    mode: "development",
    module: {
      // ...
    }
  };
};

一方で webpack 4 から --mode を指定するようになりましたが、この値を webpack.config.js 内で参照する方法が現状 function の引数で受け取る方法しかありません。
(もし、他の方法がある場合は是非教えてください)

github.com

webpack.config.js 内で development と production で設定を分岐させているプロジェクトでは、v3 から v4 への移行時に process.env.NODE_ENV から argv.mode を用いる方法へ書き換えた場合、webpack-serve で非推奨となっている function 形式で設定ファイルを記述することになってしまいます。

感想

まだ Add-on のサンプルが少なかったりするので、すぐに webpack-dev-server から移行する必要はなさそうですが、適時チェックしておくと良さそうです。