Question

我不确定这是一个Webpack问题还是一个Angular问题，但是我有一个Angular应用程序，它使用的webpack设置与angular.io站点中的设置非常相似。

所以我有我的webpack.config.js

module.exports = require('./config/webpack.dev.js');

在我执行任务时默认使用

"start-webpack": "webpack-dev-server --inline --progress"

但是我在运行应用程序时需要设置一些应用参数，比如一些API网址和其他一些东西。所以我有一个文件夹/ env，其中有几个文件dev1.ts，dev2.ts是这样的：

export = {
  API: 'http://xxxx',
  BASE_URL: 'http://xxxx',
};

我想在应用程序启动后能够访问此信息。理想情况下，我会用这样的东西启动应用程序：

"start-webpack": "webpack-dev-server --config dev1 --inline --progress"

然后在我的Angular应用程序中，我会以某种方式检索API，BASE_URL。我有点迷茫，因为我甚至不知道这是否可行。

任何人都可以给我一个关于在哪里看的提示吗？

由于

Answer 1

好的，我解决了我的问题;感谢@Ivan提示。

最后这是我的package.json脚本部分：

"start1": "webpack-dev-server --env.config=dev1 --inline --progress",
"start2": "webpack-dev-server --env.config=dev2 --inline --progress",

所以在我的webpack.web.js中我有这个：

const envConfig = {
  dev1: {
    API: xxxx
  },
  dev2: {
    API: yyyy
  }
}

module.exports = (env = {}) => {

  return webpackMerge(commonConfig, {
    ...
    plugins: [
      new webpack.DefinePlugin({
        'process.env.CONFIG': JSON.stringify(envConfig[env.config])
      })
    ],
    ...
  });
}

现在我可以使用process.env.CONFIG访问Angular中的配置（显然它可以是任何其他名称）。在我的情况下，拥有dev1和dev2是有意义的，因为我内部有一些其他的url和属性，但是如果我想暴露一个属性，我可以这样做：

const envConfig = {
  dev1: xxxx,
  dev2: yyyy
}

此外，this link帮我配置了所有内容。

希望如果有人需要类似的东西会有所帮助。

webpack中的多个配置文件，用于角度

1 个答案: