npm
webpack
webpack-serve

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

はじめに

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

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-dev-serverから置き換えるだけであれば簡単です。

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

↓のリポジトリは、webpack-dev-serverwebpack-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-fallbackkoa-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

おわりに

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