摘要：官方的文檔模塊受到影響的選項。官方文檔通過注入標簽將添加到。官方文檔這兩者一般都是配合在一起用的。代表圖片打包限制，這個限制并不是說超過了就不能打包，而是指當圖片大小小于限制時會自動轉成碼引用。不過它的放后面。

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

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

module：模塊受到影響的選項。我個人理解就是要打包的模塊會受到它配置的影響而發生一些可控的變化。常見的就是里面的rules，主要說也是這一部分。

rules：顧名思義，定規則的，怎么定呢？看有 test，正則表達式，那么要打包的模塊是要進行匹配啊，匹配做啥？匹配的模塊就要按照Loader的規則進行變化了。

loader：通過使用不同的 loader，webpack 有能力調用外部的腳本或工具，實現對不同格式的文件的處理，比如說分析轉換 scss 為 css，或者把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器兼容的JS文件。

一個js的編譯器，可將 es6+ 轉為es5 ，從而在現有的瀏覽器運行。

它十分強大，可看 阮一峰老師的babel教學，到時我也會寫一遍詳細的 babel 使用文章。

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

每一個規則都有 test：正則表達式，上圖是匹配 .js 。

exclude：這規則不包含哪個模塊的意思，值可以是 正則，也可以是 包含路徑的字符串數組。有不包含當然也有include（包含）。

babel 有自己的配置文件 .babelrc，test 匹配了，就執行配置文件（.babelrc）里的規則。

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

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

babel-polyfill 雖然支持編譯某些新的API，但還有不支持的API，那 plugins 提供了輔助的作用，transform-runtime 就是其中一個。

css-loader： 很多時候會用到 require，import，@import 導入 css ，那么就要用到 css-loader 進行轉換。（官方文檔）

style-loader： 通過注入