Question

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

myLoader.js

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

app.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。 runtimeValue 。

webpack.config.js

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

app.js

const css = STORED_CSS

Answer 2

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

像DefinePlugin一样将函数注入Webpack

2 个答案: