Webpack 4~ 5:自定义插件:用compilation.assets替换compilation.hooks.processAssets突变

Question

我在使用编译钩子processAssets在自定义插件中镜像不推荐的Webpack 4功能时遇到了问题。

插件的目的是将js/css文件的chunkhash写入python文件，该文件被Flask服务器用于根据用户的会话和角色(例如，公共、私有、管理等)来分离网页的功能。

插件的肉(与资产的直接突变)如下。

compiler.hooks.emit.tapAsync("WriteHashesPlugin", (compilation, cb) => {
    //For each bundle, write the name and the corresponding hash.
    compilation.chunks.forEach(chunk => {
        lines.push("__" + chunk.name + "_hash__ = '" + chunk.renderedHash + "'")
    });
    const content = lines.join("\n");

    compilation.assets[this.filename] = { // <= this.filename = "{relative_path}/bundles.py"
        source: () => content,
        size: () => content.length
    }
    cb();
})

这段代码仍然可以“工作”来创建/更新python文件，但是我当然不想使用不推荐的语法。生成输出中的警告消息：

(node:38072) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

我已经实现了compilation.hooks.processAssets，而不是直接访问资产；但是，我没有能够让它按预期的方式工作。

compiler.hooks.emit.tapAsync("WriteHashesPlugin", (compilation, cb) => {
    //For each bundle, write the name and the corresponding hash.
    compilation.chunks.forEach(chunk => {
        lines.push("__" + chunk.name + "_hash__ = '" + chunk.renderedHash + "'")
    });
    const content = lines.join("\n");

    // The below code block compiles but doesn't get run
    compilation.hooks.processAssets.tap({
        name: 'WriteHashesPlugin',
        stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
        additionalAssets: true
    }, () => {
        compilation.emitAsset(
            this.filename,
            content
        );
    });
    cb();
})

我也尝试过在舞台compilation.updateAsset中使用PROCESS_ASSETS_STAGE_ADDITIONS，但没有成功。

我绝不是webpack的专家，但在过去的几天里，我一直在浏览文档并试图理解源代码。关于我做错了什么，我有一些想法：

• compiler.hooks.emit不是编译过程中修改资产的适当步骤(可能在编译过程中的某个阶段，资产不是altered?).
• compilation.emitAsset，也不是要使用的适当编译钩子。
• -我误解了构建输出中的弃用警告，而且我应该完全做一些事情- different.
• There是一种更好的方法，可以为Flask.
• Something提供其他方面的资源，您可以为我说明这一点。

Answer 1

多亏了@chiborg的评论，我通过一些调整就可以让这段代码正常运行。

正如post中所写的，

首先，您需要引入webpack的{

}类，它将帮助我们对资产进行原始源更改(不管其优化或资产类型如何)：

const { sources } = require('webpack');

适当的钩子是compiler.hooks.compilation.tap而不是compiler.hooks.emit.tapAsync；一旦改变了它，钩子中的其余代码就必须移动到compilation.hooks.processAssets中。

/**
 * Writes build version and bundle hashes to a new file, with the dir
 * specified in this.filename.
 */
compiler.hooks.compilation.tap("WriteHashesPlugin", compilation => {
    compilation.hooks.processAssets.tap({
        name: 'WriteHashesPlugin',
        stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
    }, () => {
        const lines = [];
        // Write build version
        lines.push("__version__ = '" + this.version + "'");
        // For each bundle, write the name and the corresponding hash.
        compilation.chunks.forEach(chunk => {
            lines.push("__" + chunk.name + "_hash__ = '" + chunk.renderedHash + "'");
        });
        const content = lines.join("\n");
        // write bundles.py to assets
        compilation.emitAsset(
            this.filename,
            new sources.RawSource(content)
        );
    });
});

当在compilation.chunks钩子之外访问时，processAssets是空的，但是将所有东西移到钩子中使其按预期工作。