webpack4には"--mode"オプションが必須らしい

正直タイトルが全てなんですが、ちょっと詰まったのでメモっときます

webpack4でtypescriptのトランスパイルをしてたら以下の警告文が出ました。

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

「mode設定してないよ！！」って言われてなんのことやらと思ってたら、ここに詳しく載ってました。

medium.com

「webpack4から--modeオプションが必須になったよ、無くても動くけど警告文が出るよ」とのことでした。僕の環境でも警告文が出て、productionとして扱われているようでした。

webpackには2つのmodeができたようで、それぞれ挙動が違います。

• development

  • 開発ツールに対応
  • インクリメンタルビルド
  • ログが親切

• production

  • サイズが小さい
  • 開発には不親切

とりあえず欲しいのは開発環境だけだったのでコマンドを以下にして解決しました。

webpack --mode development

そしてpackage.jsonをこう書き換えておきました。（一応productionも用意した）

~ 略 ~
"scripts": {
  "build": "webpack --mode development",
  "build:watch": "webpack -w --mode development",
  "build:prod": "webpack --mode production"
}
// ~略~

気がつけばwebpackも4が出てペース早いなあ…と感じてます。この前2をいじってたのに…（）