前端工程化.md

webpack 中loader 和 plugin的区别？

• loader: 是一个node模块，也可以理解是一个转换器, 将A文件编译成B文件，比如将A.less 转换为A.css,单纯的文件转化过程。在webpack中，loader导出一个函数，loader会在转化源模块的时候调用这个函数，在这个函数的内部，我们可以通过传入 this 上下文给 Loader API 来使用它们，webpack 官网的图非常经典，左边就是源模块，会被 loader 转化为右边的通用文件，因此我们也可以概括一下 loader 的功能：把源模块转换成通用模块。
• plugin: plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。

webpack 中常用的 loader 有哪些，你能说一下吗？

• 样式：style-loader、css-loader、less-loader、sass-loader等
• 文件：raw-loader、file-loader 、url-loader等
• 编译：babel-loader、coffee-loader 、ts-loader等
• 校验测试：mocha-loader、jshint-loader 、eslint-loader等

能举一个平时使用webpackloader配置的例子吗？

config.module.rules 数组中的规则对象（rule object）

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use:[
          {loader:'style-loader'},
          {loader:'css-loader',options:{sourceMap:true,modules:true}},
          {loader:'sass-loader',options:{sourceMap:true}}
        ],
        exclude:/node_modules/
      }
    ]
  }
}

比如上面的文件，可以匹配.scss文件，分别经过 sass-loader,css-loader,style-loader处理，其中，sass-loader转化为css文件，css-loader则处理其中的@import和url()，style-loader将创建一个style标签将css文件嵌入到html中。

说一些常见loader的作用

• vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言
• file-loader、url-loader等可以处理资源，file-loader可以复制和放置资源位置，并可以指定文件名模板，用hash命名更好利用缓存。
• url-loader可以将小于配置limit大小的文件转换成内敛Data Url的方式，减少请求
• raw-loader 可以将文件以字符串的形式返回
• eslint-loader 规则校验使用

webpack中loader的执行顺序是怎么样的？

webpack 规定 use 数组中 loader 的执行顺序是从最后一个到第一个，它们符合下面这些规则

• 顺序最后的 loader 第一个被调用，它拿到的参数是 source 的内容
• 顺序第一的 loader 最后被调用， webpack 期望它返回 JS 代码，source map 如前面所说是可选的返回值。
• 夹在中间的 loader 被链式调用，他们拿到上个 loader 的返回值，为下一个 loader 提供输入。

{
  test: /\.js/,
  use: [
    'bar-loader',
    'mid-loader',
    'foo-loader'
  ]
}

在上面的配置中：

• loader 的调用顺序是 foo-loader -> mid-loader -> bar-loader。
• foo-loader 拿到 source，处理后把 JS 代码传递给 mid，mid 拿到 foo 处理过的 “source” ，再处理之后给 bar，bar 处理完后再交给 webpack。
• bar-loader 最终把返回值和 source map 传给 webpack。