loader

loader和plugin

对于webpack来说，一切都是模块，不仅仅是js文件，甚至是css文件，图片资源，这意味着，在js中可以引入一个模块（包含了该模块下所需要的资源），而不需要分开管理不同的资源。

loader转译

由于webpack只能识别js，对于其他类型的资源必须预先定义一个或者多个loader进行转译，输出为webpack能够接受的形式，因此loader实际上做得是预处理的工作。loader本质上是一个函数，在webpack4.0之前，函数的输入输出都必须为字符串，而4.0之后loader也支持抽象语法树：output=loader(input)，input和output都可以是字符串、source map、以及AST对象。

loader引入

module.exports = {
   module: {
       rules: [
           test: /\.css$/,         //匹配规则
           use: ['style-loader', {
                     loader: 'css-loader',
                     options: {
                       // css-loader配置项
                        exclude: /node_modules/, //优先级更高
                        include: /src/,
                        enforce: 'pre' //设置在所有loader之前执行 post是在之后
                      }
                }] ,  //加载顺序从右向左
          //分开来写
          use: ['style-loader', 'css-loader'],
          // 被加载的模块的配置
          resource: { 
             test: /\.css$/,
             modules: true, // 开启CSS Module的模块分割，单独作用域
             exculde: /node_modules/,
          },
          // 加载者的配置
          issuer: {
             test: /\.js$/,
              exculde: /node_modules/,
          }
       ]
   }
}

常用的loader

1、babel-loader

• 引入@babel/polyfill的原因，babel 默认只转换 js 语法，而不转换新的 es6新增的API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。想让这些方法运行则需必须使用 @babel/polyfill（使用时，在所有代码运行之前增加该插件），他有三种方式分别是babel-runtime;babel-plugin-transform-runtime;babel-polyfill；最后一种是通过改变原型来实现api垫片的，污染全局，前两种，是通过沙箱来实现的，transform-runtime是在babel-runtime的基础上进行自动配置，而不需要每次都在文件里手动引入。
• 当前 babel 推荐使用 babel-preset-env 替代 babel-preset-es2015 和 babel-preset-es2016 以及 babel-preset-es2017 ,env的支持范围更广，包含es2015 es2016 es2017的所有语法编译，并且它可以根据项目运行平台的支持情况自行选择编译版本；通过useBuiltIns选项控制是否按需引入，默认false按需引入

• babel的过程是复杂的，简单的来说是三个步骤：
  详细：https://www.cnblogs.com/duxinyi/p/11576583.html
  1.生成AST语法树，经过词法分析划分代码字符串的语法单元（数字、括号、标识符、运算符、注释等）；通过语法分析构建语法树（语句如循环 判断、表达式、声明）
  2.转化，依次访问ast节点将语法树转化为对应环境的新的语法树如小程序
  3.生成代码，根据新的语法树生成对应代码如小程序端代码
  利用编译原理可以做的事情还有很多，如模板引擎，编译器高亮，异常监控等。

2、引入图片的三种方式
js(file-loader) css(css-loader) html(html-withing-loader)
babel-loader、file-loader、url-loader

rules: [
   {
      test: /\.css$/,
      exclude: /node_modules/,
      use: {
         loader: 'babel-loader',
         options: {
             cacheDirectory: true,   // 启用缓存机制
             presets: [
                'env',  // 智能匹配当前环境，进行转码 除了polyfill和react支持几乎所有的babel的相关插件 
                {
                  modules: false,  // 禁止模块转换 防止tree-sharking失效,
                 "targets": {
                     "browsers": [
                                    "> 1%",
                                   "last 2 versions",
                                    "not ie <= 9"
                                 ],
                      "node": 'current'
                           }
                 },
        "es2015",  // 为了支持ES6模块化 不像ES5一样全部一次加载完毕，预先加载es6编译的相关模块
        "stage-2"， // ”stage-x"是对ES7一些提案的支持，Babel通过插件的方式引入，让Babel可以编译ES7代码。
            ]
         }
      }
    },
    {
      test: /\.(png|jpg|gif)$/,
      use: {
         loader: 'url-loader',   //处理图片资源
         options: {
            limit: 10240,   //大于该值返回file-loader 小于则返回base64编码
            name: '[name].[ext]',
            fallback: 'responsive-loader' //超出限制回调的loader
         }
     }
   },
   {
      test: /\.vue$/,
      use: 'vue-loader'  // vue-loader
   }
]

---

下一节 常用的plugin介绍：https://www.jianshu.com/p/9d5ac384c0ee