.37-浅析webpack源码之事件流make(4)

　　赶紧完结这个系列咯，webpack4都已经出正式版了。

　　之前的代码搜索到js文件的对应loader，并添加到了对象中返回，流程如下：

this.plugin("factory", () => (result, callback) => {

    let resolver = this.applyPluginsWaterfall0("resolver", null);

    // Ignored

    if (!resolver) return callback();

    // 这里的data就是返回的大对象

    /*

        data =>

        {

            context: 'd:\\workspace\\doc',

            request: 'd:\\workspace\\node_modules\\babel-loader\\lib\\index.js!d:\\workspace\\doc\\input.js',

            dependencies: [SingleEntryDependency],,

            userRequest: 'd:\\workspace\\doc\\input.js',

            rawRequest: './input.js',

            loaders: [ { loader: 'd:\\workspace\\node_modules\\babel-loader\\lib\\index.js' } ],

            resource: 'd:\\workspace\\doc\\input.js',

            还有package.json与parser相关的属性

        }

    */

    resolver(result, (err, data) => {

        if (err) return callback(err);

        // Ignored

        if (!data) return callback();

        // direct module

        if (typeof data.source === "function")

            return callback(null, data);

        this.applyPluginsAsyncWaterfall("after-resolve", data, (err, result) => {

            // ...

        })

    })

})

　　这个对象的request将入口文件的路径与loader拼接起来并用！分割，所有的属性基本上都与路径相关。

after-resolve事件流

　　这里会触发after-resolve事件流，注入地点如下：

const matchJson = /\.json$/i;

params.normalModuleFactory.plugin("after-resolve", (data, done) => {

    // if this is a json file and there are no loaders active, we use the json-loader in order to avoid parse errors

    // @see https://github.com/webpack/webpack/issues/3363

    if (matchJson.test(data.request) && data.loaders.length === 0) {

        data.loaders.push({

            loader: jsonLoaderPath

        });

    }

    done(null, data);

});

　　注释已经写的很明白了，这里是检测待处理文件类型是否是json文件，如果是并且没有对应的loader，就将内置的json-loader作为loader。

callback

　　接下来看回调函数内容：

this.applyPluginsAsyncWaterfall("after-resolve", data, (err, result) => {

    if (err) return callback(err);

    // Ignored

    if (!result) return callback();

    // 无此事件流 返回undefined

    let createdModule = this.applyPluginsBailResult("create-module", result);

    if (!createdModule) {

        if (!result.request) {

            return callback(new Error("Empty dependency (no request)"));

        }

        // 创建

        createdModule = new NormalModule(

            result.request,

            result.userRequest,

            result.rawRequest,

            result.loaders,

            result.resource,

            result.parser

        );

    }

    // 无此事件流

    createdModule = this.applyPluginsWaterfall0("module", createdModule);

    return callback(null, createdModule);

});

　　这里的两个事件流都是没有的，所以只需要看那个创建类的过程，然后就直接返回了。

　　只看下构造函数：

class NormalModule extends Module {

    /*

        request => 'd:\\workspace\\node_modules\\babel-loader\\lib\\index.js!d:\\workspace\\doc\\input.js'

        userRequest => 'd:\\workspace\\doc\\input.js'

        rawRequest => './input.js'

        loaders => [ { loader: 'd:\\workspace\\node_modules\\babel-loader\\lib\\index.js' } ]

        resource => 'd:\\workspace\\doc\\input.js'

        parser => [Parser]

    */

    constructor(request, userRequest, rawRequest, loaders, resource, parser) {

        super();

        this.request = request;

        this.userRequest = userRequest;

        this.rawRequest = rawRequest;

        this.parser = parser;

        this.resource = resource;

        this.context = getContext(resource);

        this.loaders = loaders;

        this.fileDependencies = [];

        this.contextDependencies = [];

        this.warnings = [];

        this.errors = [];

        this.error = null;

        this._source = null;

        this.assets = {};

        this.built = false;

        this._cachedSource = null;

    }

    // ...原型方法

}

　　只有一个getContext方法是执行的，这个方法比较简单，过一下就行：

exports.getContext = function getContext(resource) {

    var splitted = splitQuery(resource);

    return dirname(splitted[0]);

};

// 切割参数

function splitQuery(req) {

    var i = req.indexOf("?");

    if (i < 0) return [req, ""];

    return [req.substr(0, i), req.substr(i)];

}

// 返回目录

// d:\\workspace\\doc\\input.js => d:\\workspace\\doc(反斜杠这里有转义)

function dirname(path) {

    if (path === "/") return "/";

    var i = path.lastIndexOf("/");

    var j = path.lastIndexOf("\\");

    var i2 = path.indexOf("/");

    var j2 = path.indexOf("\\");

    var idx = i > j ? i : j;

    var idx2 = i > j ? i2 : j2;

    if (idx < 0) return path;

    if (idx === idx2) return path.substr(0, idx + 1);

    return path.substr(0, idx);

}

　　返回了入口文件路径的目录，也就是上下文。

　　这样一路回调返回，回到了最初的原型方法create：

// NormalModuleFactory

const factory = this.applyPluginsWaterfall0("factory", null);

// Ignored

if (!factory) return callback();

factory(result, (err, module) => {

    // 这里的module就是new出来的NormalModule对象

    if (err) return callback(err);

    // this.cachePredicate = typeof options.unsafeCache === "function" ? options.unsafeCache : Boolean.bind(null, options.unsafeCache);

    // 由于默认情况下unsafeCache为true 所以这个函数默认一直返回true

    if (module && this.cachePredicate(module)) {

        dependencies.forEach(d => d.__NormalModuleFactoryCache = module);

    }

    callback(null, module);

});

　　这里对之前处理的入口文件对象做了缓存。

　　返回又返回，回到了Compilation对象中：

_addModuleChain(context, dependency, onModule, callback) {

    // ...

    this.semaphore.acquire(() => {

        // 从这里出来

        moduleFactory.create({

            contextInfo: {

                issuer: "",

                compiler: this.compiler.name

            },

            context: context,

            dependencies: [dependency]

        }, (err, module) => {

            if (err) {

                this.semaphore.release();

                return errorAndCallback(new EntryModuleNotFoundError(err));

            }

            let afterFactory;

            // 不存在的属性

            if (this.profile) {

                if (!module.profile) {

                    module.profile = {};

                }

                afterFactory = Date.now();

                module.profile.factory = afterFactory - start;

            }

            const result = this.addModule(module);

            // ...

        });

    });

}

　　常规的错误处理，然后判断了下profile属性，这个属性大概是用计算前面factory整个事件流的触发时间。

　　总之，接着调用了addModule原型方法

addModule

// 第二个参数未传

addModule(module, cacheGroup) {

    // 这里调用的是原型方法

    /*

        identifier() {

            return this.request;

        }

    */

    // 愚蠢的方法

    const identifier = module.identifier();

    // 空对象没有的

    if (this._modules[identifier]) {

        return false;

    }

    // 缓存名是'm' + request

    const cacheName = (cacheGroup || "m") + identifier;

    // 如果有缓存的情况下

    if (this.cache && this.cache[cacheName]) {

        // ...

    }

    // 这个方法是在父类上面

    // 作用是清空属性

    // 然而并没有什么属性可以清 跳过

    module.unbuild();

    // 将类分别加入各个对象/数组

    this._modules[identifier] = module;

    if (this.cache) {

        this.cache[cacheName] = module;

    }

    this.modules.push(module);

    return true;

}

　　这个方法其实并没有做什么实际的东西，简单来讲只是添加了缓存。

　　接下来看下面的代码：

_addModuleChain(context, dependency, onModule, callback) {

    // ...

    this.semaphore.acquire(() => {

        moduleFactory.create({

            contextInfo: {

                issuer: "",

                compiler: this.compiler.name

            },

            context: context,

            dependencies: [dependency]

        }, (err, module) => {

            // ...

            // 返回一个true

            const result = this.addModule(module);

            // 跳过下面两步

            if (!result) {

                // ...

            }

            if (result instanceof Module) {

                // ...

            }

            // 进入这里

            /*

                (module) => {

                    entry.module = module;

                    this.entries.push(module);

                    module.issuer = null;

                }

            */

            onModule(module);

            this.buildModule(module, false, null, null, (err) => {

                if (err) {

                    this.semaphore.release();

                    return errorAndCallback(err);

                }

                if (this.profile) {

                    const afterBuilding = Date.now();

                    module.profile.building = afterBuilding - afterFactory;

                }

                moduleReady.call(this);

            });

            function moduleReady() {

                this.semaphore.release();

                this.processModuleDependencies(module, err => {

                    if (err) {

                        return callback(err);

                    }

                    return callback(null, module);

                });

            }

        });

    });

}

　　这个onModule来源于方法的第三个参数，比较简单，没做什么事，然后继续跑调用了原型方法buildModule。

buildModule

// this.buildModule(module, false, null, null, (err) => {})

buildModule(module, optional, origin, dependencies, thisCallback) {

    // 无此事件流

    this.applyPlugins1("build-module", module);

    if (module.building) return module.building.push(thisCallback);

    const building = module.building = [thisCallback];

    function callback(err) {

        module.building = undefined;

        building.forEach(cb => cb(err));

    }

    module.build(this.options, this, this.resolvers.normal, this.inputFileSystem, (error) => {

        // ...

    });

}

　　总的来说并没有做什么事，传进来的callback被封装并带入build方法的回调中。

module.build

// options为添加了默认参数的配置对象webpack.config.js

build(options, compilation, resolver, fs, callback) {

    this.buildTimestamp = Date.now();

    this.built = true;

    this._source = null;

    this.error = null;

    this.errors.length = 0;

    this.warnings.length = 0;

    this.meta = {};

    return this.doBuild(options, compilation, resolver, fs, (err) => {

        // ...

    });

}

　　一串串的赋值，又是doBuild方法。

module.doBuild

doBuild(options, compilation, resolver, fs, callback) {

    this.cacheable = false;

    const loaderContext = this.createLoaderContext(resolver, options, compilation, fs);

    runLoaders({

        resource: this.resource,

        loaders: this.loaders,

        context: loaderContext,

        readResource: fs.readFile.bind(fs)

    }, (err, result) => {

        // ...

    });

}

　　呃，已经连续调用好多个函数了。

createLoaderContext

createLoaderContext(resolver, options, compilation, fs) {

    const loaderContext = {

        // ..

    };

    compilation.applyPlugins("normal-module-loader", loaderContext, this);

    // 无此值

    if (options.loader)

        Object.assign(loaderContext, options.loader);

    return loaderContext;

}

　　这里先不关心这个loaderContext里面到底有什么，因为后面会调用的，直接看事件流'normal-module-loader'。

// LoaderTargetPlugin.js

compilation.plugin("normal-module-loader", (loaderContext) => loaderContext.target = this.target);

　　这里由于配置对象没有target参数，所以这个没有用。

// LoaderPlugin.js

compilation.plugin("normal-module-loader", (loaderContext, module) => {

    loaderContext.loadModule = function loadModule(request, callback) {

        // ...

    };

});

　　这个仅仅是加了个属性方法，跳过。

　　最后返回了一个包含很多方法的对象loaderContext。

　　第二步是调用runLoaders方法，将之前生成的对象传进去，这里终于要调用loader对文件进行处理了！！！！

　　下节可以有干货，这节流水账先这样了。

巴特西

.37-浅析webpack源码之事件流make(4)

最新文章

热门文章