Can Webpack change API paths on build?

Question

webpack

I'm interested in the question: how can I organize the assembly of the webpack project, in which the API access paths would change.
Now I take all the paths from one file, is it possible to organize the assembly in such a way that all the assembled modules see another file with different paths?

Answer 1

You can add paths as options when building.
In config:

const API = process.env.api;

module.exports = {
    ...,
    plugins: [
        ...,
        new webpack.DefinePlugin({
            API_URL: JSON.stringify(API)
        })
    ]
}

And the API_URL global variable will be available in your project code.
Conditional build config in your package.json:

{
  "scripts": {
    "build": "webpack --env.api=https://api.url/v1"
  }
}

If you need to add on the fly:
npm run build -- --env.api=https://api.url/v2

Answer 2

IMHO it is correct to do this - add the file containing the paths to .gitignore, then build individually on the production / test / your server. Well, or not in .gitignore, but in the "master" branch, and do not transfer the changes of this file to this branch when merging (this is somewhat more confusing). Doing the assembly at home and copying to the prod is wrong.