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

開発用サーバとして使われている 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 と同じく開発用サーバですが WebSocket や koa-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 では非推奨となっています。
（この理由も README 内に記載されています）

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

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

github.com

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

感想

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