[Webpack並不難]使用教程（二）--- module.loaders

第一篇講了Webpack的安裝，以及配置文件的 entry，devtool，output，resolve。這篇接着說配置文件的 module。
想看看第一篇的朋友能夠點 這裏。

---

module (官方的文檔)

module: {
    rules: [
      { 
        test: /\.js$/, 
        loader: 'babel-loader' 
      }, { 
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: { name: '[name].[ext]?[hash]'}
      }
    ]
  }

1. module：模塊受到影響的選項。我我的理解就是要打包的模塊會受到它配置的影響而發生一些可控的變化。常見的就是裏面的rules，主要說也是這一部分。
2. rules：顧名思義，定規則的，怎麼定呢？看有 test，正則表達式，那麼要打包的模塊是要進行匹配啊，匹配作啥？匹配的模塊就要按照Loader的規則進行變化了。
3. loader：經過使用不一樣的 loader，webpack 有能力調用外部的腳本或工具，實現對不一樣格式的文件的處理，好比說分析轉換 scss 爲 css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件。

babel-loader （官網地址）

• 一個js的編譯器，可將 es6+ 轉爲es5 ，從而在現有的瀏覽器運行。
• 它十分強大，可看 阮一峯老師的babel教學，到時我也會寫一遍詳細的 babel 使用文章。

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  }

1. 每個規則都有 test：正則表達式，上圖是匹配 .js 。
2. exclude：這規則不包含哪一個模塊的意思，值能夠是 正則，也能夠是 包含路徑的字符串數組。有不包含固然也有include（包含）。
3. babel 有本身的配置文件 .babelrc，test 匹配了，就執行配置文件（.babelrc）裏的規則。

// .babelrc 的內容。
{
  "presets": [ // 設定轉碼規則
    "env",     
    "stage-2" 
    "stage-3" 
  ],
  "plugins": ["transform-runtime"]
}

1. preset 只是編譯了語法，那新的API就可能沒辦法編譯了，這時候須要 plugins 了。

   • env： 包含 es2015，es2016，es2017 的轉碼規則 npm install babel-preset-env --save-dev
   • stage-2： es7 第二版本的轉碼規則 npm install babel-preset-stage-2 --save-dev
   • stage-3: es7 第三版本的轉碼規則 npm install babel-preset-stage-2 --save-dev
2. babel-polyfill 雖然支持編譯某些新的API，但還有不支持的API，那 plugins 提供了輔助的做用，transform-runtime 就是其中一個。

css-loader 和 style-loader

• css-loader： 不少時候會用到 require，import，@import 導入 css ，那麼就要用到 css-loader 進行轉換。（官方文檔）
• style-loader： 經過注入 <style> 標籤將 CSS 添加到 DOM。（官方文檔）
• 這二者通常都是配合在一塊兒用的。

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
    // 也能夠寫成 loader: 'style!css' 或 loader: [ 'style-loader', 'css-loader' ]
  }

url-loader （官方文檔）

• 它的做用就相似 file-loader（下面會說），可是在文件大小低於指定的限制時（單位 bytes）能夠返回一個以 base64 的方式引用。

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: { 
          limit: 8192, 
          name: 'images/[hash:8].[name].[ext]'
        }
      }
    ]
  }

1. use 裏包含 loader 這種寫法也能夠，這樣寫是爲了給每一個 loader 均可以添加自身的 options。
2. options 是 url-loader 的自身配置，就像 babel 也有本身的配置同樣。
3. limit：表明圖片打包限制，這個限制並非說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用。上例中大於 8192 字節的圖片正常打包，小於8192 字節的圖片以 base64 的方式引用。
4. name: 打包到指定目錄下會生成 images 的文件夾，且原圖的 name（名字）前帶有 8 位 hash 值。 最後的 .[ext] 意思是原來什麼擴展名就是什麼擴展名。
5. 若是文件大小大於限制，將轉爲使用 file-loader，全部的查詢參數也會透傳過去。若是沒有 file-loader 就確定不會傳過去咯。

file-loader (官方文檔)

• 默認狀況下，生成的文件的文件名是文件內容的 MD5 散列，具備所需資源的原始擴展名。

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }

1. name： 這裏的 name 跟上面同樣的意思。不過它的 hash 放後面。
   例如：file.png => file.png?e43b20c069c4a01867c31e98cbce33c9。
2. [hash]： 這裏的是內容的哈希值，默認爲十六進制編碼的 md5。

最後說下

• loader 固然不止這些，我只是列舉了一些常見的。例如 vue 和 react 的 loader 等等。
• 每一個 loader 都有他們自身的 options ，我也是列舉一些常見的。
• 一樣 module 除了 rules 也有其餘的屬性。
• 上面都是常見，不常見的呢。做爲程序猿，要去讀文檔，要去讀文檔，要去讀文檔！！！ 這是基本技能咧，哈哈，每一個官網我都有貼的。

---

使用教程（三）--- plugins