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

这个问题的核心痛点就是异步操作的执行时机：当Webpack读取你的module.exports时，webconfig.compile()的异步回调还没执行，所以WEB_API_URL和WEB_APP_URL还是初始的'a'和'b'。

好在Webpack 4及以上版本支持导出一个返回配置对象的Promise，我们可以利用这个特性来解决问题，直接把整个配置逻辑改成异步的：

const webconfig = require("webconfig");
const webpack = require('webpack');

// 导出一个异步函数，Webpack会等待Promise完成后获取配置
module.exports = async () => {
  // 先等待Web.config解析完成
  const config = await webconfig.compile({
    sources: [ __dirname + '/Web.config' ]
  });

  // 从解析结果中提取需要的变量
  const WEB_API_URL = config.appSettings['__API_URL__'];
  const WEB_APP_URL = config.appSettings['__APP_URL__'];

  // 返回最终的Webpack配置
  return {
    // ... 这里放你原来的其他Webpack配置（entry、output等）
    plugins: [
      new webpack.DefinePlugin({
        __API_URL__: JSON.stringify(WEB_API_URL),
        __APP_URL__: JSON.stringify(WEB_APP_URL)
      })
    ]
  };
};

为什么这样能行？ #

Webpack在加载配置文件时，如果发现导出的是一个异步函数（或者Promise），会自动等待这个Promise resolve后，再使用返回的配置对象。这样我们就能确保DefinePlugin拿到的是从Web.config中解析出来的真实值，而不是初始的占位符。

注意事项 #

• 确保你的Webpack版本是4.x或更高，旧版本不支持异步配置导出。
• 如果因为某些原因无法升级Webpack，你可以考虑提前在构建脚本中先解析Web.config并把值写入一个临时JSON文件，再在webpack.config.js中同步读取这个文件的值；或者查找webconfig是否提供同步解析的API，不过前者的异步方案是最简洁的。

内容的提问来源于stack exchange，提问作者lkurylo