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

　　管他的，估计源码太大，开发者已经顾不上了。

class RuleSet {
 constructor(rules) { /**/ }
 // rules => 传进来的配置数组
 // refs => 纯净对象
 // ident => 'ref-'
 static normalizeRules(rules, refs, ident) {
 // 分数组与非数组
 if (Array.isArray(rules)) {
 return rules.map((rule, idx) => {
 return RuleSet.normalizeRule(rule, refs, `${ident}-${idx}`);
 });
 } else if (rules) {
 return [RuleSet.normalizeRule(rules, refs, ident)];
 }
 // 未配置rules直接返回空数组 
 else {
 return [];
 }
 }
}

　　生成了一个纯净对象并调用了本地静态方法进行格式化：

6、处理use参数

wns9778.com 1

// 数组
module.exports = {
    // ...
    module: {
        rules: [{ test: /.vue$/, loader: 'vue-loader' }, /*...*/ ]
    }
};
// 非数组
module.exports = {
    // ...
    module: {
        rules: { test: /.vue$/, loader: 'vue-loader' }
    }
};

// 数组
module.exports = {
 // ...
 module: {
 rules: [{ test: /.vue$/, loader: 'vue-loader' }, /*...*/ ]
 }
};
// 非数组
module.exports = {
 // ...
 module: {
 rules: { test: /.vue$/, loader: 'vue-loader' }
 }
};

　　构造函数如下：

wns9778.com 2

　　内容比较多，还是分两节讲吧。

wns9778.com 3

　　看代码可以很容易猜到，数组与非数组的情况理论上是这样的：

5、处理loader、loaders、options、query参数

2、处理单字符串rule

　　这里也区分了数组参数与非数组参数，但是有个小bug。

　　这就很尴尬了，提供了非数组形式的处理方式，但是又不通过非数组的校验，所以这基本上是永远不会被执行的代码。

　　该方法生成了一个对象参数，而对象中的值又分别调用了各自的工厂方法。

5、处理loader、loaders、options、query参数

　　简单看一下方法，源码如下：

class RuleSet {
    constructor(rules) { /**/ }
        // rules => 传进来的配置数组
        // refs => 纯净对象
        // ident => 'ref-'
    static normalizeRules(rules, refs, ident) {
        // 分数组与非数组
        if (Array.isArray(rules)) {
            return rules.map((rule, idx) => {
                return RuleSet.normalizeRule(rule, refs, `${ident}-${idx}`);
            });
        } else if (rules) {
            return [RuleSet.normalizeRule(rules, refs, ident)];
        }
        // 未配置rules直接返回空数组 
        else {
            return [];
        }
    }
}

2、处理单字符串rule

3、处理test、include、exclude参数

总结

const path = require('path');
// resolve => path.join(__dirname,'..',path)
module.exports = {
    entry: './input.js',
    output: {
        filename: 'output.js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /.css/,
                loader: 'css-loader!style-loader'
            }
        ]
    }
};

　　只针对配置中有或者常用且官网有解释的参数进行。

wns9778.com 4

3、处理test、include、exclude参数

　　在进入compile方法后，迎面而来的就是这么一行代码：

1、生成newRules对象保存转换后的rules

　　Tips：写到这里，需要对当初的规则进行修改。在必要的地方，会在webpack.config.js中设置特殊的参数来跑源码，例如本例会使用module:{rules:[...]}来测试，基本上测试参数均取自于vue脚手架(太复杂的删掉)。

4、处理resource、resourseQuery、compiler、issuer参数

　　但是，这样配置是会报错的，因为过不了validateSchema的验证，测试结果如图：

const params = this.newCompilationParams();

　　从参数可以看出，这里是对module.rules处理的地方，本节中测试配置添加了rules方便测试：

class NormalModuleFactory extends Tapable {
 // context默认为命令执行路径
 // resolvers => {...}
 // options => options.module
 constructor(context, resolvers, options) {
 super();
 // 该参数在WebpackOptionsApply方法中被赋值
 this.resolvers = resolvers;
 // 处理module.rules或module.loaders
 // 两者意义一样
 this.ruleSet = new RuleSet(options.rules || options.loaders);
 // 谁会去设置这玩意???默认参数设置那会被置为true
 // 这里会生成一个返回布尔值的函数 可以简单理解为!!
 this.cachePredicate = typeof options.unsafeCache === "function" ? options.unsafeCache : Boolean.bind(null, options.unsafeCache);
 this.context = context || "";
 // 解析缓存
 this.parserCache = {};
 // 这两个方法超级长
 this.plugin("factory", () => (result, callback) => { /**/ });
 this.plugin("resolver", () => (data, callback) => { /**/ })
 }
}

　　这里也区分了数组参数与非数组参数，但是有个小bug。

大家可以点击查看。

class NormalModuleFactory extends Tapable {
    // context默认为命令执行路径
    // resolvers => {...}
    // options => options.module
    constructor(context, resolvers, options) {
        super();
        // 该参数在WebpackOptionsApply方法中被赋值
        this.resolvers = resolvers;
        // 处理module.rules或module.loaders
        // 两者意义一样
        this.ruleSet = new RuleSet(options.rules || options.loaders);
        // 谁会去设置这玩意???默认参数设置那会被置为true
        // 这里会生成一个返回布尔值的函数 可以简单理解为!!
        this.cachePredicate = typeof options.unsafeCache === "function" ? options.unsafeCache : Boolean.bind(null, options.unsafeCache);
        this.context = context || "";
        // 解析缓存
        this.parserCache = {};
        // 这两个方法超级长
        this.plugin("factory", () => (result, callback) => { /**/ });
        this.plugin("resolver", () => (data, callback) => { /**/ })
    }
}

您可能感兴趣的文章:

　　也是一个继承了Tapable框架的类，构造函数除去两个事件流注入不看，剩余的内容只有RuleSet那一块，也是本节的主要内容。

const path = require('path');
// resolve => path.join(__dirname,'..',path)
module.exports = {
 entry: './input.js',
 output: {
 filename: 'output.js'
 },
 module: {
 rules: [
 {
 test: /.js$/,
 loader: 'babel-loader',
 include: [resolve('src'), resolve('test')]
 },
 {
 test: /.css/,
 loader: 'css-loader!style-loader'
 }
 ]
 }
};

6、处理use参数

　　也是一个继承了Tapable框架的类，构造函数除去两个事件流注入不看，剩余的内容只有RuleSet那一块，也是本节的主要内容。

本文由wns9778.com发布于计算机教程,转载请注明出处：细说webpack源码之compile流程-rules参数处理技巧wn

关键词： wns9778.com

计算机教程

原标题：细说webpack源码之compile流程-rules参数处理技巧wn

您可能感兴趣的文章: