さいしんのじょうほう
当初こちらの記事は「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する際のコマンドを書き換えておきましょう。
{
...
scripts: {
- "start": "webpack-dev-server --config webpack.config.preview.js",
+ "start": "webpack-serve --config webpack.config.preview.js",
...
}
webpackの設定を書き換え
devServer
の部分を書き換える必要があります。
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の設定を書き換え
フォールバックの設定込みで書き換えます。
...
+ 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
おわりに
動いてるので特に問題ないということもあるかもしれませんが、以上のように比較的簡単に置換えできますので、さっさと置換えてしまったほうが良いと思います。