50
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-11

さいしんのじょうほう

当初こちらの記事は「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-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

おわりに

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

50
21
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
50
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?