export function square ( x ) {
    return x.h
}

function squareui ( x ) {
    return x['squareui']+t(x)
}

var t = function (d) {
    // body...
    return a*1000111*squareui(d)
}

square({ a: 123 })/*#__PURE__*/

export function cube ( x ) {
    return x * x * x*t(x);
}

每一个模块都会经过一次 JavascriptGenerator.generate

generate(module, dependencyTemplates, runtimeTemplate) {
        const originalSource = module.originalSource();
        if (!originalSource) {
            return new RawSource("throw new Error('No source available');");
        }

        const source = new ReplaceSource(originalSource);
        this.sourceBlock(
            module,
            module,
            [],
            dependencyTemplates,
            source,
            runtimeTemplate
        );
        return source;
    }

对于以上源码模块,以module代替:

clipboard.png

关键属性:

for (const dependency of block.dependencies) {
            this.sourceDependency(
                dependency,
                dependencyTemplates,
                source,
                runtimeTemplate
            );
        }

block.dependencies 即 module.dependencies

dependencies翻译成附属品?

clipboard.png

这2个比较关键

序号3、5:HarmonyExportSpecifierDependency

module的来源可以 追踪到
`/* @type {{id: string|number, source: Source|string}[]} /

    const allModules = modules.map(module => {
        return {
            id: module.id,
            source: moduleTemplate.render(module, dependencyTemplates, {
                chunk
            })
        };
    });`

modules果然是一个数组

clipboard.png

就是2个模块的集合,对应的是 rollA 和 pageB

追踪到 compilation文件生产规则时,发现最初的 this.chunk内部没有内容的:this.chunks[0]._modules

关键逻辑如下:

            GraphHelpers.connectChunkAndModule(chunk, module);

webpack_devsave
16 声望0 粉丝

a