webpack - 如何从 Webpack 4 中的加载程序上下文访问编译器/编译/模块

Question

我正在尝试编写一个自定义 webpack 加载器。

Webpack 文档提到不推荐访问_compiler,_compilation和_moduleloader 上下文中的属性（https://webpack.js.org/api/loaders/#this_compilation）并且应该避免。

是否有更新的 API 可以让我访问它们？

标签： webpackwebpack-4

Answer 1

对于任何试图弄清楚同样事情的人。我认为没有任何替代 API。这个想法可能是加载器不应该真的需要访问这些对象，如果你确实需要它们，你应该使用插件来代替（或另外）。

如果这些属性将来会被删除，您可以使用插件“将它们添加回来”：

// custom-plugin.js
const NormalModule = require('webpack/lib/NormalModule')

class CustomPlugin {
    apply (compiler) {
        compiler.hooks.compilation.tap('CustomPlugin', (compilation) => {
            NormalModule.getCompilationHooks(compilation).loader.tap('CustomPlugin', (loader, module) => {
                loader._customPlugin = {
                    module: module,
                    compiler: compiler,
                    compilation: compilation,
                }
            })
        });
        
    }
}

module.exports = CustomPlugin

// custom-loader.js
module.exports = function (source) {
    console.log({
        module: this._customPlugin.module === this._module, // true
        compiler: this._customPlugin.compiler === this._compiler, // true
        compilation: this._customPlugin.compilation === this._compilation, // true
    });
    return source
}