来自异步函数的 Webpack DefinePlugin答案

【问题标题】：Webpack DefinePlugin from async function来自异步函数的 Webpack DefinePlugin
【发布时间】：2021-03-19 01:27:22
【问题描述】：

我想定义一些从异步资源返回的常量。无论如何在 Webpack 中可以做到这一点？

/* webpack.config.js */
module.exports = {
    ...,
    plugins: [
        new webpack.DefinePlugin({
            someVar: /* RETURN VARIABLE FROM ASYNC FUNCTION */
        })
    ]
}

【问题讨论】：

标签： javascript node.js asynchronous webpack

【解决方案1】：

这样做的一个好方法是从 webpack 配置中 return a Promise。

webpack.config.js

...

module.exports = () => {
  return getYourAsyncResource().then((someVar) => {
    // Resolve as webpack configuration
    return {
      ...
      plugins: [
        new webpack.DefinePlugin({ someVar })
      ]
    };
  }) 
};

【讨论】：

您能说得更具体些吗？可以举个例子吗？
@MaxCoplan 在当前版本的 webpack 中，可能的一个好方法是返回一个 Promise，如下所示：webpack.js.org/configuration/configuration-types/…。让我相应地修改答案。 :)
我确定你的答案是正确的。不幸的是，我使用vue-cli 和vue.config.js，它采用与webpack.config.js 相同的选项，这让我认为答案是相同的。不幸的是，目前这看起来不太可能github.com/vuejs/vue-cli/issues/3328，但可能很快就会得到支持github.com/vuejs/vue-cli/pull/6275
@MaxCoplan 可能有办法解决这个问题。如果您可以在 webpack 运行之前运行脚本，您可以在异步操作之后将某些内容设置为 env ，然后在 webpack 配置中使用 process.env 来访问它。使用 npm 很容易实现。 :)