如何同时使用 webpack 配置类型 promise 和 environment 函数答案

【问题标题】：How can I use both webpack configuration types promise and environment function together如何同时使用 webpack 配置类型 promise 和 environment 函数
【发布时间】：2017-10-22 11:02:25
【问题描述】：

我需要使用 webpack 配置中的库来获取执行构建的个人的用户名。我正在使用npm 'username' 包，它是异步的，并在获取用户名时返回一个承诺。

const username = require('username');

username().then(username => { });

webpack documentation 描述了一种返回承诺的配置

module.exports = () => { return new Promise((resolve, reject) => {})}

以及从 CLI 命令行使用环境变量的另一种类型的配置

module.exports = function(env) {}

，但不知道如何将两者结合使用。

我需要能够从命令行读入环境变量--env=prod从CLI设置如下package.json

  "scripts": {
    "start": "webpack-dev-server --env=local --port=4200 --history-api-fallback",
    "build": "webpack",
    "build-dev": "rimraf dist && webpack --env=dev --colors --bail",
    "build-prod": "rimraf dist && webpack -p --env=prod --colors --bail",
    "test": "karma start ./karma.conf.js"
  },

【问题讨论】：

标签： configuration promise environment-variables webpack-2

【解决方案1】：

经过反复试验，我发现可以将这两种配置文件技术结合起来，您可以将导出设置为将为您提供环境变量的函数，然后该函数可以返回一个 Promise 本身，并且承诺可以返回配置。

通过这种方式，您可以在 webpack 的配置中获得 promise 的结果和环境变量。

module.exports = function(env) {
  console.log(`Building target environment: ${env}`);

  return username().then(username => {
      return {
      "devtool": "source-map",
        // ... original config here
      };
  });
};

【讨论】：