webpack - loader 学习记录（一）

以下是参加 千锋的《前端架构进阶实战训练营》 中学习到的知识点。
摘录了一些暂时还无法用自己的话描述的定义性知识与常规配置示例。
知识点没有全部记录在案，只记录个人真正吸收的知识，如有需要可联系我代为推荐。

什么是loader?

loader是⼀个函数，通过它我们可以在webpack处理特定资源(⽂件)之前进⾏预处理。
例如：webpack仅仅只能识别javascript模块，⽽我们在使⽤TypeScript编写代码时可以提前通过babelloader将.ts后缀⽂件提前编译称为JavaScript代码，之后再交给Webpack处理。

常⽤配置参数

1. 基础配置示例

module.exports = {
	module: {
		rules: [
			{ test: /.css$/, use: 'css-loader',enforce: 'post' },
			{ test: /.ts$/, use: 'ts-loader' },
		],
	},
};

2. 参数

• test
  test是⼀个正则表达式，根据test的规则去匹配⽂件。如果匹配到，那么该⽂件就会交给对应的
  loader去处理。
• use
  use表示匹配到test中匹配对应的⽂件应该使⽤哪个loader的规则去处理，use值的类型: 字符串或数
  组。
  当为数组时表执⾏顺序为： 从右往左(从下往上) 。
• enforce
  pre: 前置执⾏
  post: 后置执⾏

关于pitch阶段的说明

loader的执⾏阶段分为两个阶段:

• webpack在使⽤loader处理资源时⾸先会经过loader.pitch阶段

• pitch阶段结束后才会读取⽂件⽽后进⾏normal阶段处理。

   Pitch  阶段: loader 上的 pitch ⽅法，按照 后置(post)、⾏内(inline)、普通(normal)、前置(pre) 的顺序调⽤。
   Normal 阶段: loader 上的 常规  ⽅法，按照 前置(pre)、普通(normal)、⾏内(inline)、后置(post) 的顺序调⽤。
  

function loader() {
// 正常的loader执⾏阶段...
}
// remainingRequest: 表示剩余需要处理的loader的绝对路径以!分割组成的字符串
// precedingRequest: 表示pitch阶段已经迭代过的loader按照!分割组成的字符串
// data: 在pitch和loader之间交互数据
loader.pitch = function (remainingRequest, precedingRequest, data) {
// pitch loader
// 如果return了⾮undefined的值，会带来熔断效果
}

如果loader.pitch函数中return了⾮undefined的值，会带来熔断效果

loader相关api:

https://www.webpackjs.com/api/loaders/