博客
关于我
webpack loader配置全流程详解
阅读量:794 次
发布时间: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/

你可能感兴趣的文章
mysql5.5和5.6版本间的坑
查看>>
mysql5.5最简安装教程
查看>>
mysql5.6 TIME,DATETIME,TIMESTAMP
查看>>
mysql5.6.21重置数据库的root密码
查看>>
Mysql5.6主从复制-基于binlog
查看>>
MySQL5.6忘记root密码(win平台)
查看>>
MySQL5.6的Linux安装shell脚本之二进制安装(一)
查看>>
MySQL5.6的zip包安装教程
查看>>
mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
查看>>
Webpack 基本环境搭建
查看>>
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>