实际项目运用中，webpack对需要在部署后可修改的配置文件如何打包

Question

初学者。用Vue开发前端，webpack打包。
在实际应用中，对于一些需要在部署到服务器后可能需要修改的配置项，一般是怎么操作的？
打个比方，前端vue中需要调用的服务webAPI的url，写在配置变量APIURL中，我看教程和网上的例子，建议做法是在config木料下的prod.env.js 和dev.env.js里面去分别指定APIURL，可以达到开发和部署不用频繁手动修改url的目的。
但是，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，修改prod.env.js的APIURL后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。
以前用过asp.net，一般这样的配置可放在web.config里面，这个改动只要在服务器端编辑修改下web.config的url，重启web服务即可生效。
请教大神，webpack是否也有相类似的机制或者方法，可以把这样的可能发生运行时修改的配置进行保留，便于运维时可以方便的修改？
或者在实际项目中，这样的配置一般是怎么操作的？

Answer 1

从其它问题中找了一个方法，暂时算是解决。
参考：webpack打包同时，如何生成一个带有当前hash值的json？

用了generate-asset-webpack-plugin 这个插件，
在webpack.prod.conf.js中去生成configServer.json文件，让其在build的时候输出：

var GenerateAssetPlugin=require('generate-asset-webpack-plugin'); 
var createServerConfig=function(compilation){
  //console.log("info from GenerateAssetPlugin:");
  //console.log(compilation);
  let cfgJson={ApiUrl:"192.168.11.90"};
  return JSON.stringify(cfgJson);
}

//在plugins:[]中
    new GenerateAssetPlugin({
        filename: 'serverconfig.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        },
        extraFiles: []
    })

然后，在用axios，get一下这个json

    getConfigJson(){
        axios.get("serverconfig.json").then((result)=>{
            console.log('read from json');
            console.log(result);
        }).catch((error)=>{console.log(error)});
    }

入口main.js的时候，去调用一下这个getConfigJson(),算是把配置读到了。
费了半天劲，就是为了可以在server端可以有个可以用记事本随时修改的serverConfig.json
供自己和有同样需求的人参考。望有实际项目经验的分享下其它的方法。
ps：自问：这个会不好不安全？把服务api的url的暴露出来了，浏览器地址只要请求这个json，配置岂不是都看到了？

自答：如果害怕暴露，觉得webpack封装起来比较安全，那浏览器调试时，随便看下http请求也就知道url了，没有费更多的精力，所以应该和安全不安全没啥关系，就是怕有写权限json被篡改了吧？