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

Question

We have an application that has multiple environments and is about to have multiple vendors. I understand that the typical flow is to run webpack --env.NODE_ENV=myenvironment, however, this will become highly inefficient very quickly.

Ultimately, the simplicity of my goal is to copy the environment.json file into the output folder and use it so that I can perform transformations in Octopus Deploy rather than having to run multiple builds.

In other words, I'd like to utilize a single environment.json file for the purpose of providing variable substitutions in Octopus Deploy. Here's a sample environment.json:

{
    "production": false,
    "baseUrl": "http://myapp.com",
    "appId": "MyAppId"
}

Now in AngularJS code, I'm configuring constants that utilize these values:

import * as environment from '../../environment.json';
console.log(environment.baseUrl); // http://myapp.com

angular.module('app')
  .constant('environment', environment);

So far, so good.

The problem is that now if I modify the values inside of dist/environment.json (note this is in the output folder), it does not update the values. For example, if I change the value of baseUrl to http://myapp-dev.com, the console.log will still print http://myapp.com.

Here's the relevant code in my webpack.config.js:

Rules

...
{
  test: /\.json$/,
  use: 'json-loader',
  exclude: [/environment\.json$/]
},
... 

Plugins

...
new CopyWebpackPlugin([{
  from: 'environment.json'
},
...

The above code successfully copies the environment.json file to the output folder, but the rest of the code in the output folder is NOT using it. For whatever reason it appears to still be coupled with webpack.

Answer 1

CopyWebpackPlugin just copies a file - nothing more happens here and Webpack won't use that internally. The static JSON import is most likely part of you main bundle js.

Instead of trying to dynamically replace some parts of the build define a external module. This way you have the flexibility to provide whatever globals you want to the browser environment and webpack will know where to find them during runtime.