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

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

How Do I Copy an environment.json File To My Output Folder and Use The Output file with Webpack 4?

javascript

angularjs

octopus-deploy

webpack