如何将 environment.json 文件复制到我的输出文件夹并在 Webpack 4 中使用输出文件？

Question

我们有一个具有多个环境的应用程序，并且即将拥有多个供应商。我知道典型的流程是运行webpack --env.NODE_ENV=myenvironment，但是，这很快就会变得非常低效。

最终，我的目标很简单，就是将environment.json 文件复制到输出文件夹并使用它，这样我就可以在 Octopus Deploy 中执行转换，而不必运行多个构建。

换句话说，我想利用一个environment.json 文件在Octopus Deploy 中提供变量替换。这是environment.json 的示例：

{
    "production": false,
    "baseUrl": "http://myapp.com",
    "appId": "MyAppId"
}

现在在 AngularJS 代码中，我正在配置利用这些值的常量：

import * as environment from '../../environment.json';
console.log(environment.baseUrl); // http://myapp.com

angular.module('app')
  .constant('environment', environment);

到目前为止，一切都很好。

问题是，现在如果我修改 dist/environment.json 中的值（注意这是在输出文件夹中），它不会更新值。例如，如果我将baseUrl 的值更改为http://myapp-dev.com，console.log 仍然会打印http://myapp.com。

这是我webpack.config.js中的相关代码：

规则

...
{
  test: /\.json$/,
  use: 'json-loader',
  exclude: [/environment\.json$/]
},
... 

插件

...
new CopyWebpackPlugin([{
  from: 'environment.json'
},
...

上述代码成功地将environment.json 文件复制到输出文件夹，但输出文件夹中的其余代码并未使用它。无论出于何种原因，它似乎仍然与 webpack 耦合。

Answer 1

CopyWebpackPlugin 只是复制一个文件——这里什么都没有发生，Webpack 不会在内部使用它。静态 JSON 导入很可能是主包 js 的一部分。

与其尝试动态替换构建的某些部分，不如定义一个external module。这样你就可以灵活地为浏览器环境提供任何你想要的全局变量，并且 webpack 将知道在运行时在哪里找到它们。