如何将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会知道在运行时可以在哪里找到它们。