如何将 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 将知道在运行时在哪里找到它们。
我们有一个应用程序有多个环境并且即将有多个供应商。我知道典型的流程是 运行 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 将知道在运行时在哪里找到它们。