Question

这给了我主题模块的源代码：

compiler.plugin('compilation', (compilation) => {
  compilation.plugin('succeed-module', (module) => {
    console.log(module._source.source());
  });
});

源代码以字符串形式给出。源代码包含exports.locals属性：

exports = module.exports = require("./../../node_modules/css-loader/lib/css-base.js")();
// imports

// module
exports.push([module.id, ".app-test-fooBarBaz {\n  background: #f00;\n}", ""]);

// exports
exports.locals = {
  "fooBarBaz": "app-test-fooBarBaz"
};

[..]

有没有办法只从exports.locals对象访问compilation的值？

Answer 1

我无法找到生成exports.locals的值的位置。因此，唯一的替代解决方案是从字符串中提取值。为此，我使用AST-Query来解决主题分配，然后使用escodegen来生成对象，即

import program from 'ast-query';
import escodegen from 'escodegen';

const nodes = program(module._source.source()).assignment('exports.locals');
escodegen.generate(nodes.nodes[0]);

这确实有效（它在前面的例子中提取了对象的值）。但是，如果它对输入代码的结构做了很多假设。此外，它很可能不是正确的解决方案 - 必须有一种方法可以在转换为字符串之前访问modules.exports值。

我使用此解决方案来解决特定问题。记录解决方案以供其他人参考。

Answer 2

不会从编译而是从webpack parser实例完成。您可以挂钩代码中的任何符号。找到完整列表here。

如果您要修改值，我相信您可以使用webpack-sources库。

如何在success-module事件之后获取模块的exports.locals的值？

2 个答案: