私はWebpackのローダーを2つの異なる用途に使用していることに気付きました。一つ目は、特定のルールにローダーを包む、より明示的なようだ：ローダーWebpackを使用する場合、これらの構文はどちらも正しいですか？
module: {
rules: [
{test: ..., loader: ...}
]
}
第二は速記のように思えるが、私はこれを明確にするかもしれない見つけた唯一のドキュメントはhereであるが、これはRule.loadersの代わりに言及しているのに対しmodule.loaders。
module: {
loaders: [
...
]
}
それぞれの意味は異なりますか？
module.rulesとmodule.loadersの両方が有効です。 module.rulesがwebpack 2に新しく改良されたローダー構成で導入されましたが、module.loadersは引き続き簡単に受け入れることができます。 module.rulesが存在する場合、webpack 2はmodule.loadersを完全に無視します。。
ルールは実際には変更されませんが、ルール内のローダー定義は変更されません。なぜなら、ルールはローダーではないので、これはあまり混乱させないからです。このことを詳述するために、module.rulesは、条件が満たされたときに各ルールが1つまたは複数のローダーを適用するルールのセットです。ローダーは、指定された入力を有効なJavaScriptに変換するJavaScriptモジュールです。入力は何でもかまいません（JS、CSS、プレーンテキストなど）。これらの入力タイプを適切に処理する方法は適切なローダーのみが認識します。
ローダーの定義が改善されました。たとえば、すべてのオプションをクエリースタイルで使用して文字列を作成する代わりに、各ローダのオプションをJavaScriptオブジェクトとして定義できるようになりました。具体的な違いは次のようになります。
WebPACKの1
{
test: /\.css/,
loader: 'style-loader!css-loader?modules&localIdentName=[path][name]__[local]--[hash:base64:5]'
}
WebPACKの2
{
test: /\.css/,
use: [
'style-loader',
{
loader: 'css-loader'
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
WebPACKの2バージョンが読み取りまたは修正する方がはるかに簡単です。もしあなたがstyle-loaderのオプションを持っていれば、あるいはさらに多くのローダーがあれば、文字列表現は（文字列連結の場合でも）手に入らなくなります。
ルール内ではuse,loadersおよびloaderとの違いもありますが、ほとんどの場合互換性がありますが、扱い方が異なります。
useは（loaderは、互換性の理由のためにuseの別名である）ローダの配列を受け取り：
use: ['babel-loader']
loaderは、単一のルールを定義するための省略形である。
loader: 'babel-loader'
// Equivalent to
use: ['babel-loader']
各ローダをuseにオブジェクトまたは文字列のいずれかにすることができます。ここで、文字列は単なる別名バージョンです。
use: ['babel-loader']
// Equivalent to
use: [{ loader: 'babel-loader' }]
オブジェクトバリアントでは、上記の.cssの例に示すようなオプションを使用できます。
一部の設定で表示される別のショートカットは、loaderを使用すると、直接ルールにoptionsを定義できるということです。 1つのローダーで、複数のローダーで試してみるとwebpackが不平を言うことを覚えておいてください。
これはルールとローダー定義の概要を示しますが、すべてをカバーしているわけではありませんが、他の方法（例：useに関数を渡すなど）があります。お気軽にsource for the rulesを読んでください。冒頭のコメントはすでに役立っていますが、すべてをカバーしているわけでもありません。