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

2018-06-24 01:35:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  赶紧完结这个系列咯,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对文件进行处理了!!!!

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:webpack配置之代码优化

下一篇:react的基本概念