预处理器loader总结

Time: 20191005

预处理器的作用

前端工程涉及到的资源，除了JS还有很多其他内容：

• HTML
• CSS
• 模板
• 图片
• 字体
• …

我们前面都是在围绕着JS的打包问题在学习Webpack。

现在我们需要进一步学习在Webpack中，如何统一处理多种资源，用到的技术就是预处理技术。

预处理器被称作loader，能够赋予Webpack处理不同资源的能力，为前端打包提供了丰富的扩展性。

涉及的内容有：

• loader的概念
• loader的原理
• 引用loader
• 常用loader介绍
• 编写自己的loader

Webpack: 一切皆模块

在Webpack中，所有的静态资源都是模块，因此，可以和加载JS文件一样加载它们。比如：

// index.js
import './style.css';

说到底，这不会影响前端的表现，只是写法用工程性的方式来组织代码和各类资源，用引用的方式能够清晰地表达资源的依赖关系。

比如引用显示组件和对应的样式：

// ./page/home/index.js
import Calendar from './ui/calendar/index.js'

// SCSS语法
// ./page/home/style.scss
@import './ui/calendar/style.scss'

上面这种是SCSS语法下的写法，如果使用Webpack，则语法可以简化许多：

// ./ui/calendar/index.js
import './style.scss' // 引用组件自身样式

// ./page/home/index.js
import Calendar from './ui/calendar/index.js'
import './style.scss' // 引用页面自身样式

这样，从顶向下，逻辑是统一的，只需要引用当前层级的样式即可，依赖关系非常简单明了。

依赖关系的表达变得扁平化。

模块本身有高内聚，低耦合的特性，用一切皆模块的思想来组织前端静态资源，能使得系统开发设计变得更加健壮。

loader的概念

所有的loader的本质都是函数。

用公式化的表达是：

output = loader(input)

值得注意的是，在Webpack4之前，函数的输入输出都必须是字符串。但在此之后，loader开始支持抽象语法树AST的传递，这样能够降低重复的代码解析。

在公式中，input和output都可以是下面几种选项的一种：

• 字符串
• 前一个loader转化后的结果
• source map
• AST对象

loader的使用是可以链式的，当前loader的输出可以作为下一个loader的输入，直到最后一个结果输入到Webpack进行处理。

用公式化的描述是：

output = loaderA(loaderB(loaderC(input)))

了解了loader的概念后，我们将进一步研究如何配置loader。

loader的配置

TBD…

常用loader介绍

TBD…

自定义loader

TBD…

转载：https://blog.csdn.net/u011240016/article/details/102158158