像DefinePlugin一样向Webpack注入功能

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(),
}),