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

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

我们有一个应用程序有多个环境并且即将有多个供应商。我知道典型的流程是 运行 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 结合使用。

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

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