前端工程化-loader机制

前言：

---

loader是用来加载处理各种形式的资源，本质上是一个函数，接受文件作为参数，返回转化后的结构。loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “加载” 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 dataURL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

loader和plugin区别：

---

loader是用来对模块的源代码进行转换，而插件目的在于解决 loader 无法实现的其他事，plugin可以在任何阶段调用，能够跨loader进一步加工loader的输出，在构建运行期间，触发事件，执行预先注册的回调，使用compilation对象做一些更底层的事情。

webpack 核心原理：

---

1. webpack会根据配置将一个文件作为打包的入口（一般为js)，根据该入口文件的导入语句，解析推断该文件所依赖的资源模块。
2. 解析每个资源模块对应的依赖，最后形成的项目关系之间的依赖树。
3. webpack会递归这个依赖树，找到每个节点所对应的资源文件。
4. 根据配置文件当中的rules属性去找到模块文件所对应的(loader)加载器，然后加载器加载该模块。
5. 将加载器的结果放入bundle.js即打包结果当中，从而实现整个项目的打包。
   
   

loader解析：

---

loader的作用就是加载各种类型的资源文件，并且最终打包成bundle.js文件。

举个例子：

项目使用less编写样式，webpack是怎么加载less文件的呢？我们平时也知道需要webpack中配置style-loader，css-loader，less-loader，那它们的作用分别是什么呢？

• less-loader：
  less 代码经过 less-loader 的转换成css代码，再包装一层 module.exports，成为一个 JS module。less-loader 本质上只是调用了 less 本身的 render 方法，由于 less.render 是异步的，less-loader 肯定也得异步，所以需要通过回调函数来获取其解析之后的 css 代码。

// less-loader
const less = require('less');

module.exports = function (source