像DefinePlugin一样将函数注入Webpack

Question

我想在加载器和运行时代码之间进行通信。具体来说，我想编写一个加载器，将所有已加载的 CSS 存储在我可以在运行时读出的变量中。下面是一些虚拟代码来说明：

我的加载器.js

module.exports = function(content) {
// This should store the content accessible to the runtime code
storeCss(content);
return content;
};

应用.js

// This should load the CSS as stored by the loader
const css = getStoredCss();

例如，使用webpack.DefinePlugin我可以这样做：

new webpack.DefinePlugin({
SOME_GLOBALLY_AVAILABLE_CONST: JSON.stringify('my value'),
}),

现在，在我的加载器和运行时代码中，我都可以访问SOME_GLOBALLY_AVAILABLE_CONST并'my value'。是否可以编写一个插件来执行相同的操作，但实现storeCss和getStoredCss，以便我可以在加载器和运行时代码中访问它们？

Answer 1

您现在可以使用新的DefinePlugin执行此操作。运行时值。

webpack.config.js

new webpack.DefinePlugin({
STORED_CSS: webpack.DefinePlugin.runtimeValue(
function () { return JSON.stringify(getStoredCss()) }, []
)
})

应用.js

const css = STORED_CSS

Answer 2

new webpack.DefinePlugin({
SOME_GLOBALLY_AVAILABLE_FUNCTION_THAT_PROBABLY_SHOULDNT_BE_ALL_CAPS: require('./myLoader.js').toString(),
}),