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

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

一応、経緯を時系列にならべてみると
<dl>
    <dt>2018/01/06</dt>
    <dd>webpack-dev-serverがメンテナンスモードに入る。Expressでいいじゃんみたいな書きぶりとなる。
    </dd>
    <dt>2018/05/15</dt>
    <dd>webpack-dev-serverの代わりみたいなやつがほしいなら、webpack-serve使いなとアナウンスされる。
    </dd>
    <dt>2018/08/22</dt>
    <dd>突如webpack-dev-serverのメンテナンスモードが解除される
    「なんでなんで？」って質問に対しては、「webpack-serveがこっちに統合されることになったわ！まぁ近い内に発表するで」と回答。
    </dd>
    <dt>2018/09/18</dt>
    <dd>webpack-serveがdeprecatedになる。webpack-dev-server使ってねと記載。
    </dd>
</dl>

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

---
ここから下は
**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`なので要注意です。

```shell-session
$ npm uninstall --save-dev webpack-dev-server
$ npm install --save-dev webpack-serve
```

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

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

#### webpackの設定を書き換え
`devServer`の部分を書き換える必要があります。

```diff: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`が必要です。

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

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

```diff: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

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