Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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-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

おわりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
22
Help us understand the problem. What are the problem?