webpack-dev-serverを使っているのにリロードしない問題に対処してみる

公開

webpackを使用しているプロジェクトがあるのですが、昨夜「DevServer | webpack」を読み設定したところ、開発がスムーズに進められるサーバーが起動できることが分かりました。History APIを使用していたのですが、historyApiFallbackを使用すれば対応するのはとても驚きました。

ただ、設定を進めるうちに自動リロードが効かなくなることに気付きました。あれこれコメントアウトしていったところ、ようやくIE11向けに設定しているtarget: ['web', 'es5']が原因であることが分かりました。GitHubのIssueにもリロードしないとのコメントが寄せられています。

諦めるしかないかとも思ったのですがリロードが手間なので環境変数を設定し、IE11で確認したい時とビルドする時のみtarget: ['web', 'es5']となるようにしてみると解決しました。

設定

package.json

develop:support_ieとbuildの時、コマンドにSUPPORT_IE=trueを追加します。Windowsで実行すると「'SUPPORT_IE' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」とのエラーメッセージが出たので、cross-envの導入により回避しました。MacやLinuxの場合は必要ありません。

{
  "scripts": {
    "start": "webpack serve -c conf/webpack.dev.js",
    "develop:support_ie": "cross-env SUPPORT_IE=true webpack serve -c conf/webpack.dev.js",
    "build": "cross-env SUPPORT_IE=true webpack -c conf/webpack.prod.js"
  },

webpack.common.js

「Production | webpack」に従って設定ファイルを分けているため、webpack.common.jsに記述しました。webpack.config.jsに記述しても問題ないです。

let setES5 = false;
if (process.env.SUPPORT_IE) {
  setES5 = true;
}

module.exports = {
  target: setES5 ? ['web', 'es5'] : 'web',