webpack-dev-serverがオワコンになってたのでwebpack-serveに置換えたらwebpack-serveがオワコンになってwebpack-dev-serverが復活した

さいしんのじょうほう

当初こちらの記事は「webpack-dev-serverがオワコンになってたのでwebpack-serveに置換えた」というタイトルだったのですが、現在のタイトルの通りの事態になりました。
結論として、2018/9/20現在は「webpack-dev-serverを使いましょう」ということになっています。

一応、経緯を時系列にならべてみると

2018/01/06

webpack-dev-serverがメンテナンスモードに入る。Expressでいいじゃんみたいな書きぶりとなる。

2018/05/15

webpack-dev-serverの代わりみたいなやつがほしいなら、webpack-serve使いなとアナウンスされる。

2018/08/22

突如webpack-dev-serverのメンテナンスモードが解除される
「なんでなんで？」って質問に対しては、「webpack-serveがこっちに統合されることになったわ！まぁ近い内に発表するで」と回答。

2018/09/18

webpack-serveがdeprecatedになる。webpack-dev-server使ってねと記載。

こんな感じのようです。何なん一体…。
元記事は以下に残しておきます。

---

ここから下は
webpack-dev-serverがオワコンになってたのでwebpack-serveに置換えた
時代の記事です

はじめに

開発中のページを、ちょこっとpreviewするときにwebpack-dev-serverを使ってたのですが、新規開発終了でメンテモードに突入していました。自分のリポジトリ内で使っていたものをwebpack-serveに置き換えましたので、そのときの作業についての備忘です。

webpack-dev-serverの書きぶり

webpack-dev-serverのリポジトリを見に行くと、こんな事が書いてあります。

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. Most new feature
requests can be accomplished with Express middleware; please look into using the
before and after hooks in the documentation.

Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.

https://github.com/webpack/webpack-dev-server#project-in-maintenance

ざっと訳すと

webpack-dev-serverは現在メンテナンスモードで、機能要望の受付も近い内にクローズします。たいていの要望は、Expressのミドルウェアでなんとかなるものばかりですので、そっちを探してみてください。

webpack-serveへの置き換えが一番手っ取り早いでしょう。webpack-dev-serverを使うのは、古いブラウザのテストのときくらいにしておきましょう。

という感じですね。
要するにwebpack-serveに置換えましょうということです。

webpack-serveに置換え

ということで置換えてみましょう。webpack-serveは非常に色々な機能があるようですが、ちょろっとwebpack-dev-serverから置き換えるだけであれば簡単です。

シンプルに置き換えてみる

↓のリポジトリは、webpack-dev-serverをwebpack-serveに置換えました。
https://github.com/IgnorantCoder/webpack-typescript-react-sample

その時の作業は次のような感じです。

webpack-dev-serverをアンインストールしてwebpack-serveをインストールする

npmコマンドは次のような感じになります。webpack-serverではなく、webpack-serveなので要注意です。

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

package.jsonの書き換え

startする際のコマンドを書き換えておきましょう。

package.json

{
    ...
    scripts: {
-        "start": "webpack-dev-server --config webpack.config.preview.js",
+        "start": "webpack-serve --config webpack.config.preview.js",
    ...
}

webpackの設定を書き換え

devServerの部分を書き換える必要があります。

webpack.config.preview.js

module.exports = {
...
-    devServer: {
-        contentBase: path.resolve(__dirname, 'dist'),
-        port: 3000
-    }
+    serve: {
+        content: path.resolve(__dirname, 'dist'),
+        port: 3000
+    }
...
}

フォールバック付き

↓のリポジトリも、同様に置換えました。ただ、こちらはルーティング付きでしたので、フォールバックの設定をしました。
https://github.com/IgnorantCoder/typescript-react-redux-router-sample

webpack-serveとともに、historyApiFallback用のモジュールをインストールする

webpack-serveの他に、connect-history-api-fallbackとkoa-connectが必要です。

$ npm uninstall --save-dev webpack-dev-server
$ npm install --save-dev webpack-serve connect-history-api-fallback koa-connect

webpackの設定を書き換え

フォールバックの設定込みで書き換えます。

webpack.config.preview.js

...
+ const history = require('connect-history-api-fallback');
+ const convert = require('koa-connect');

module.exports = {
...
-    devServer: {
-        contentBase: path.resolve(__dirname, 'dist'),
-        port: 3000,
-        historyApiFallback: {
-            index: '/',
-        },
-    },
+    serve: {
+        content: path.resolve(__dirname, 'dist'),
+        port: 3000,
+        add: (app, middleware, options) => {
+            app.use(convert(history({ index: '/' })));
+        },
+    }
...
}

参考: https://github.com/webpack-contrib/webpack-serve/blob/master/docs/addons/history-fallback.config.js

おわりに

動いてるので特に問題ないということもあるかもしれませんが、以上のように比較的簡単に置換えできますので、さっさと置換えてしまったほうが良いと思います。