webpack昔の記述と今の記述

webpack4以降の記述方法はV2,V3の頃とお作法が変わっている部分があるので、備忘録として残します。

×　loaders:[
○　rules:[

loadersの記述方法昔の記述は以下です。

loaders:[
  "style-loader",
  "css-loader?modules=true"
  "scss-loader",
]

webpack4以降の記述にはuseを使います。以下が記述例です。

use:[
  {
   loader:"style-loader"
  },
  {
   loader:"css-loader",
   options:{
    modules:true
   }
  }
]

また、v1の時はローダーの読み込みに以下のようなチェインローダーを使用することができましたが、

loader:"style-loader!css-loader!less-loader"

v4時点では、配列で記述するように推奨されています。また以前は「loader」を省略して「style」「css」のように記述することもできましたが、こちらも今は推奨されていません。

最新の情報は公式サイトをご確認ください。

Witten by Masa

情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。