博客
关于我
webpack loader配置全流程详解
阅读量:793 次
发布时间:2023-02-11

本文共 2313 字,大约阅读时间需要 7 分钟。

配置语法解析

Webpack的模块配置是其核心功能之一,主要涉及模块属性的设置和规则集的定义。以下将从模块属性和规则集两个方面详细阐述配置的具体语法和实现原理。

模块属性

Webpack模块的配置通常通过module.exportsmodule.exports = {}的形式进行定义。核心配置项包括noParserules,以下是常见的配置示例:

module.exports = {
// ...其他配置
module: {
noParse: /jquery/,
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{ loader: './loader1.js?num=1', options: { myoptions: false } },
'./loader2.js?num=2'
]
},
{
test: /\.js$/,
include: /src/,
loader: './loader1.js!./loader2.js'
}
]
}
}

从上述配置可以看出,module对象包含了noParserules两个属性。noParse用于指定需要保留的文件类型或路径,Webpack将跳过对这些文件的转化但仍会打包输出到DIST目录。rules则是核心配置,用于定义文件匹配规则和对应的加载器。

Webpack的模块属性声明

根据Webpack的打字稿声明,ModuleOptions接口定义了模块属性的各种可能性,具体包括以下属性及其类型:

export interface ModuleOptions {
// 一般下面这两个
noParse?: RegExp[] | RegExp | Function | string[] | string;
rules?: RuleSetRules;
// 这些...已被废弃,即将被删除,不用看
defaultRules?: RuleSetRules;
exprContextCritical?: boolean;
exprContextRecursive?: boolean;
exprContextRegExp?: boolean | RegExp;
exprContextRequest?: string;
strictExportPresence?: boolean;
strictThisContextOnImports?: boolean;
unknownContextCritical?: boolean;
unknownContextRecursive?: boolean;
unknownContextRegExp?: boolean | RegExp;
unknownContextRequest?: string;
unsafeCache?: boolean | Function;
wrappedContextCritical?: boolean;
wrappedContextRecursive?: boolean;
wrappedContextRegExp?: RegExp;
}

从中可以看出,noParse支持多种类型,包括正则表达式、函数、字符串等,rules属性则定义了规则集的具体规则。需要注意的是,rules属性的类型是RuleSetRules,而RuleSetConditionsRecursive则是RuleSetCondition[]类型,表示一个数组。

规则集的规范化

在实际应用中,一个规则集可能包含多种不同的规则,每个规则对应不同的文件类型和加载方式。然而,由于规则的属性类型多样,底层需要对这些规则进行规范化处理,确保规则的类型一致性。这一过程通常由RuleSet.js模块负责。

规范化后的规则对象可能会呈现以下形式:

// 规则对象规范化后的形状应该是:
{
resource: function(),
resourceQuery: function(),
compiler: function(),
issuer: function(),
use: [
{
loader: string
}
]
}

规范化过程中,底层会自动处理规则的属性类型收敛,减少手动判断typeof等操作,从而提高代码的可维护性和性能。

总结

通过以上配置示例和理论分析,可以清晰地了解Webpack模块配置的基本语法和工作原理。从module.exportsrules的配置,都是为了实现对文件的智能转化和打包,确保在开发和生产环境下都能高效运行。理解这些配置项的含义和类型,有助于更好地优化Webpack的打包流程,提升开发效率。

转载地址:http://htbfk.baihongyu.com/

你可能感兴趣的文章
mysql 字段合并问题(group_concat)
查看>>
mysql 字段类型类型
查看>>
MySQL 字符串截取函数,字段截取,字符串截取
查看>>
MySQL 存储引擎
查看>>
mysql 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
查看>>
MySQL 存储过程参数:in、out、inout
查看>>
mysql 存储过程每隔一段时间执行一次
查看>>
mysql 存在update不存在insert
查看>>
Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
查看>>
Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
查看>>
Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
查看>>
Mysql 学习总结(89)—— Mysql 库表容量统计
查看>>
mysql 实现主从复制/主从同步
查看>>
mysql 审核_审核MySQL数据库上的登录
查看>>
mysql 导入 sql 文件时 ERROR 1046 (3D000) no database selected 错误的解决
查看>>
mysql 导入导出大文件
查看>>
mysql 将null转代为0
查看>>
mysql 常用
查看>>
MySQL 常用列类型
查看>>
mysql 常用命令
查看>>