使用裝載機Webpack時，這兩種語法都正確嗎？

我注意到在Webpack中包含裝載機的兩種不同用途。第一個似乎更明確，在一個特定的規則包裹裝載機：使用裝載機Webpack時，這兩種語法都正確嗎？

module: { 
    rules: [ 
     {test: ..., loader: ...} 
    ] 
}

而第二個看起來像速記，但我發現的唯一的文檔可能澄清這是here，但這提到Rule.loaders代替module.loaders。

module: { 
    loaders: [ 
     ... 
    ] 
}

它們有不同的含義嗎？

來源

2017-04-12 charliesneath

module.rules和module.loaders都有效。 module.rules已經在webpack 2中引入了新的改進的加載程序配置，但仍然接受module.loaders以簡化轉換。 請注意，如果module.rules存在，webpack 2將完全忽略module.loaders。

規則並沒有真正改變，而是規則中的加載器定義。對我來說，這是它重新命名的另一個很好的理由，因爲規則不是裝載者，這使得它更容易混淆。詳細說明，module.rules是一組規則，其中每個規則在條件滿足時應用一個或多個加載器。加載器是一個將給定輸入轉換爲有效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是用於定義一個規則的簡寫：在use

loader: 'babel-loader' 
// Equivalent to 
use: ['babel-loader']

每個裝載機可以是對象或字符串，其中字符串只是另一個簡寫版本。

use: ['babel-loader'] 
// Equivalent to 
use: [{ loader: 'babel-loader' }]

目的變體允許您使用選項所示.css上述例子。

您在某些配置中可能會看到的另一個快捷方式是，如果您使用loader，則可以直接在規則上定義options。請記住，這是一個單一的加載器，如果你使用多個加載器嘗試它，webpack會發出抱怨。

這應該給你一個規則和加載器定義的概述，但它並不包含所有內容，還有其他方法（例如，將函數傳遞給use）。隨意閱讀source for the rules，一開始的評論已經有所幫助，但它們也不包括所有內容。

來源

2017-04-12 14:51:48

使用裝載機Webpack時，這兩種語法都正確嗎？

回答

相關問題