[Webpack并不难]使用教程（二）--- module.loaders

摘要：官方的文档模块受到影响的选项。官方文档通过注入标签将添加到。官方文档这两者一般都是配合在一起用的。代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成码引用。不过它的放后面。

第一篇讲了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： 通过注入