深入解析Webpack源码：rules参数处理的细节与技巧(2)
114 浏览量
更新于2024-09-01
收藏 85KB PDF 举报
"本文将继续深入解析Webpack源码中的编译流程，重点探讨rules参数处理技巧的第二部分。在Webpack的工作流程中，rules是配置的重要组成部分，它们定义了如何处理和打包不同的资源。在compile流程中，规则处理是一个关键步骤，涉及到test、include和exclude等条件判断。
首先，当遇到rule参数为字符串时，会创建一个特定的包装类，这部分代码简洁明了，通过注释即可理解其功能。test属性在这里扮演着决定是否应用规则的角色，它用于匹配资源路径，如果rule包含test、include或exclude属性，那么这些条件会被逐一检查。
`checkResourceSource`函数用于确保每个规则只有一个资源源，这是为了保证配置的唯一性。如果多个规则试图引用相同的资源，这个函数会抛出错误，避免潜在冲突。同时，`checkUseSource`方法也起到了类似的作用。
接下来，规则的条件（test、include、exclude）被合并成一个对象，并传递给`normalizeCondition`方法。这个方法的作用是对这些常规参数进行函数化处理，使其成为可执行的逻辑，以便在实际的资源处理过程中应用。
`normalizeCondition`方法可能会涉及类型转换、逻辑组合或异常处理，确保规则条件的正确性和有效性。如果在处理过程中出现错误，如无效的函数或语法问题，会捕获并重新抛出错误，提供有用的错误信息。
Webpack的compile流程中的rules参数处理是一个复杂而精细的过程，它确保了配置的正确执行和资源管理的高效性。理解这些细节对于开发者来说至关重要，可以帮助优化构建过程，提高代码的可维护性。如果你正在深入研究Webpack，这部分源码的学习无疑会提升你的技术栈和开发效率。"
细说细说webpack源码之源码之compile流程流程-rules参数处理技巧参数处理技巧(2)
主要介绍了webpack源码之compile流程-rules参数处理技巧的相关知识，需要的朋友参考下吧
上篇文章给大家介绍了细说webpack源码之compile流程-rules参数处理技巧(1)， 细说webpack源码之compile流程-入口函数run
大家可以点击查看。
第一步处理rule为字符串，直接返回一个包装类，很简单看注释就好了。
test
然后处理test、include、exclude，如下：
if (rule.test || rule.include || rule.exclude) {
// 标记使用参数
checkResourceSource("test + include + exclude");
// 没有就是undefined
condition = {
test: rule.test,
include: rule.include,
exclude: rule.exclude
};
// 处理常规参数
try {
newRule.resource = RuleSet.normalizeCondition(condition);
} catch (error) {
throw new Error(RuleSet.buildErrorMessage(condition, error));
}
}
checkResourceSource直接看源码：
let resourceSource;
// ...
function checkResourceSource(newSource) {
// 第一次直接跳到后面赋值
if (resourceSource && resourceSource !== newSource)
throw new Error(RuleSet.buildErrorMessage(rule, new Error("Rule can only have one resource source (provided " + newSource + " and " + resourceSource + ")")));
resourceSource = newSource;
}
这个用于检测配置来源的唯一性，后面会能看到作用，同样作用的还有checkUseSource方法。
随后将三个参数包装成一个对象传入normalizeCondition方法，该方法对常规参数进行函数包装：
class RuleSet {
constructor(rules) { /**/ };
static normalizeCondition(condition) {
// 假值报错
if (!condition) throw new Error("Expected condition but got falsy value");
// 检测给定字符串是否以这个开头
if (typeof condition === "string") { return str => str.indexOf(condition) === 0; }
// 函数直接返回
if (typeof condition === "function") { return condition; }
// 正则表达式返回一个正则的test函数
if (condition instanceof RegExp) { return condition.test.bind(condition); }
// 数组map递归处理 有一个满足返回true
if (Array.isArray(condition)) {
const items = condition.map(c => RuleSet.normalizeCondition(c));
return orMatcher(items);
}
if (typeof condition !== "object") throw Error("Unexcepted " + typeof condition + " when condition was expected (" + condition + ")");
const matchers = [];
// 对象会对每个值进行函数包装弹入matchers中
Object.keys(condition).forEach(key => {
const value = condition[key];
switch (key) {
case "or":
case "include":
case "test":
if (value)
matchers.push(RuleSet.normalizeCondition(value));
break;
case "and":
if (value) {
const items = value.map(c => RuleSet.normalizeCondition(c));
matchers.push(andMatcher(items));
}
break;
case "not":
case "exclude":
下载后可阅读完整内容，剩余5页未读，立即下载
169 浏览量
127 浏览量
542 浏览量
2020-08-28 上传
2021-01-19 上传
点击了解资源详情
241 浏览量
145 浏览量
2021-06-06 上传
weixin_38744778
- 粉丝: 7
- 资源: 917
我的内容管理
展开
