如何在使用Webpack和AngularJS构建期间导入/注入资源文件

Question

我目前正在使用一个白色标签AngularJS应用程序，该应用程序需要某些变量在运行时可用，具体取决于Webpack中内置的“亲和力”。我正在使用Webpack 4和AngularJS（带有Typescript）。

// foo.json
{ "code": "foo", "name": "Foo International" }

// bar.json    
{ "code": "bar", "name": "Bar Industries" }

// affinity.json (this is the base file)
{ "code": "", "name": "", country": "UK" }

1. 在执行webpack时，我想传递一个参数，即webpack --env.affinity=foo，并为其创建foo.json和affinity.json的合并版本。即

// affinity.json (the new one)
{ "code": "foo", "name": "Foo International", "country": "UK" }

  

编辑：我使用MergeJsonWebpackPlugin合并了所需的.json文件，但取得了一些小的成功。不幸的是，这仅将其输出到输出文件夹（不在捆绑包中）。

1. 以上内容的输出必须包含在捆绑包中（我猜为module.exports的形式，即

eval("module.exports = {\"code\":\"foo\",\"name\":\"Foo Industries\",\"Country\":\"UK\"};\n\n//#sourceURL=webpack:///./src/app/affinity.json?");

1. 最后，我需要AngularJS导入此资源，并在应用程序中使用它。即

import * as affinity from "../affinity.json";

我认为这会起作用，但是该捆绑包包含affinity.json的“基本”版本。输出版本正确，但可能不应该存在。