webpack loader配置全流程详解

前言

1.主要目的为稍微梳理从配置到装载的流程。另外详解当然要加点源码提升格调（本人菜鸟，有错还请友善指正）
2.被的WebPack打包的文件，都被转化为一个模块，比如import ‘./xxx/x.jpg’或require(’./xxx/x.js’)。至于具体实际怎么转化，交由装载机处理
3.下文会使用打字稿（劝退警告？）以方便说明有哪些选项和各个选项的值类型

配置语法解析

模块属性

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',
            },
        ]
    }
}

上述是展示常见的配置写法.webpack为其选项都编写了打字稿声明，这个模块属性的声明在的WebPack /声明中可见：

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 用于让的WebPack跳过对这些文件的转化，也就是他们不会被加载程序所处理（但还是会被打包并输出到DIST目录）
rules 核心配置，见下文
module.rules属性
module.rules类型是RuleSetRule[]，请继续的WebPack /声明查看其打字稿，有哪些属性，属性类型一目了然。
注意RuleSetConditionsRecursive这个东西在另外一个文件声明，是interface RuleSetConditionsRecursive extends Array<import("./declarations/WebpackOptions").RuleSetCondition> {}，其实就是export type RuleSetConditionsRecursive = RuleSetCondition[];，代表一个RuleSetCondition数组
意义直接贴中文文档：模块。

好了，上面基本是搬运打字稿声明，结合文档基本能知道有哪些属性，属性的类型和含义。下面结合源码对文档一些难以理解的地方补充说明。

正文

规则集
规则的规范化（类型收敛）
由上可知一个规则对象，其属性类型有多种可能，所以应该对其规范化，底层减少代码的大量typeof等判断。这是由RuleSet.js进行规范化的。下面是经过规则集处理后的一个规则对象大致形式：

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