webpack - 通过 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

我有配置的层次结构，所以到处都有支持异步 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;