深入解析Webpack源码：rules参数处理的细节与技巧(2)

108 浏览量更新于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页未读，立即下载

weixin_38744778

粉丝: 7
资源: 917

深入解析Webpack源码：rules参数处理的细节与技巧(2)

warnings-to-errors-webpack-plugin:一个webpack插件，可以将每个警告识别为错误

webpack-bundle-tracker:将有关Webpack编译过程的一些统计信息吐出到文件中

webpack-filter-warnings-plugin:允许您从Webpack编译中隐藏某些警告

细说webpack源码之compile流程-rules参数处理技巧(1)

细说webpack源码之compile流程-入口函数run

webpack源码解析：compile流程与rules参数处理

webpack-post-compile-plugin:一个webpack post编译插件

webpack-module-rules-utils:从Webpack配置遍历和操纵模块规则的实用程序

毕业设计旅游网站源码-gitbook-webpack-for-multi-pages:如何使用webpack构建商业站点的指南

webpack-----视频讲解

最新资源