通过 webpack.DefinePlugin 从外部文件设置变量 - 异步读取问题

Question

我在 webpack.config.js 文件中定义了两个变量，我想用来自外部文件 Web.config 的值填充它们。对于这个外部文件，我有一个名为 webconfig 的 npm 包来解析变量并且它可以工作。文件被异步解析，因此问题在于正确创建 module.exports。

const webconfig = require("webconfig");

let WEB_API_URL = 'a';
let WEB_APP_URL = 'b';

webconfig
    .compile({
        sources: [
            __dirname + '/Web.config'
        ]
    })
    .then(config => {
        WEB_API_URL = config.appSettings['__API_URL__'];
        WEB_APP_URL = config.appSettings['__APP_URL__'];
    });

 module.exports = {
//...
 plugins: [
        new webpack.DefinePlugin({
            __API_URL__: JSON.stringify(WEB_API_URL),
            __APP_URL__: JSON.stringify(WEB_APP_URL)
        })
}

现在，定义的属性导出为 'a' 和 'b'。无法找到如何从文件中导出已解析的属性。有什么建议吗？

Answer 1

我终于开始工作了：

    module.exports = () => {
        let config = webconfig
            .compile({
                sources: [
                    __dirname + '/Web.config'
                ]
            });

        return config.then(data => {
            return {
//...
                plugins: [
                    new webpack.DefinePlugin({
                        __API_URL__: JSON.stringify(data.appSettings.__API_URL__),
                        __APP_URL__: JSON.stringify(data.appSettings.__APP_URL__)
                    })
                ]
            }
        });
    };

Answer 2

我有配置层次结构，所以 promises 将无处不在以支持异步 webpack 调用

用 deasync

解决这个问题

var webconfig = require("webconfig");

var result;
function getWebConfig() {
    webconfig
        .compile({
            sources: getConfigFilenames(),
        })
        .done(function (compiledWebConfig) {
            result = compiledWebConfig;
        });
}

getWebConfig();

while (result === undefined) {
    // Use sync call of async function
    require('deasync').runLoopOnce();
}
module.exports = result;

通过 webpack.DefinePlugin 从外部文件设置变量 - 异步读取问题

set variables by webpack.DefinePlugin from outer file - issues with async read

webpack

web-config

webpack-plugin