webpack3.0之loader配置及編寫(一)

loader 用於對模塊的源代碼進行轉換。loader 能夠使你在 import 或"加載"模塊時預處理文件。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！

在深刻學習對loader的編寫以前，咱們先熟悉下loader的常見配置規則。常見的有兩種配置規則：

規則1：

loader配置中options的值能夠在loader執行過程當中獲取到，進行相應處理，也能夠直接在loader路徑中添加query參數以下配置：

rules: [
   {

      test: /\.text$/,
      loader: 'text-loader?name=1'//若是配置了options選項時，在路徑中添加的query參數就沒法獲取到了
   }
]

你還能夠使用 resolveLoader.modules 配置，webpack 將會從這些目錄中搜索這些 loaders。例如，若是你的項目中有一個 /loaders 本地目錄，目錄中有一個loader文件名爲text-loader.js，那麼能夠這樣配置：

resolveLoader: {
  modules: [
    'node_modules',
    path.resolve(__dirname, 'loaders')
  ]
},
module: {
    rules: [

        {

          test: /\.text$/,
          loader: 'text-loader'//若是node_modules目錄中不存在，那麼會取loaders目錄中查找
        }
    ]

}

若是你想對某一類型的文件匹配多個loader，能夠按照下列規則配置，多個loader模塊用!分割，而且實際loader執行順序是從右往左，多個loader串聯的做用和如何使用參考下篇文檔。

{
test: /\.scss$/,
loader:'style-loader!css-loader!sass-loader'
}

規則2:

若是想匹配多個loader，還能夠使用use配置數組，實際loader執行順序是從下往上

{
  test: /\.scss$/,
  use:[
    {
      loader:'style-loader',
      options:{}
    },
    {
　　　　loader:'css-loader'
　　 },

    {
　　　　loader:'sass-loader'
　　　}

  ]
}

若是對於引入的loader不作格外的配置，那麼能夠在use數組中添加loader名便可：

{
  test: /\.scss$/,
  use:['style-loader','css-loader','sass-loader']
}

在熟悉了對loader的基本配置規則以後，那麼咱們就開始學習如何編寫本身的loader吧

webpack3.0加載器loader配置及編寫(二)