解决webpack编译后 docker镜像无法-v 映射配置文件的问题

• 痛点：webpack项目编译后 配置的环境变量会直接打包到静态文件里，同时会进行压缩混淆处理，导致后期运维人员启动docker 镜像时，修改配置困难的问题
• 传统解决方案：在static/目录下手动创建 config.js
• 优点：

1. 可以通过 docker -v 的形式映射配置文件启动服务

• 缺点：

1. 每次都需要手工写入
2. 同时只支持一个环境，多次编译需要多次修改__ENV__.js
3. 需要手动在代码里写兼容 如 http_url = window.__ENV__? window.__ENV__.http_url : process.env.http_url ;

• 我的方案：webpack 启动的时候读取所需的环境变量写入指定目录文件里，如果文件不存在会自动创建
• 优点：

1. 可以通过 docker -v 的形式映射配置文件启动服务
2. 系统自动读取并转存至静态目录，无需手动干预
3. 每次编译自动根据webpack环境变量更新配置文件，切换环境无需手动修改静态__ENV__.js

• 缺点：

1. 需要手动在代码里写兼容 如 http_url = window.__ENV__? window.__ENV__.http_url : process.env.http_url ; //这个暂时没想到太好的办法

• 以下为实际使用示例

#在启动配置文件头部写入如 webpack.config.js 

const path = require("path");
const writeConfigToWindows = require("./writeConfigToWindows");
//把VUE变量写入静态资源中，保证编译后docker -v 还可以继续修改配置
writeConfigToWindows.reWrite(process.env, path.resolve(__dirname,"./public/static/__ENV__.js"), ["VUE_APP_"]);

• 以下为输出结果（代码部分内容做了模糊处理）

• 实现代码（无私奉献）

module.exports = {
    reWrite(ENV, Path, keyNamePrefix = []) {
        let __ENV__ = {}
        Object.keys(ENV).forEach(key => {
            keyNamePrefix.forEach(prefix => {
                if (key.indexOf(prefix) > -1) {
                    __ENV__[key] = ENV[key];
                }
            })

        });
        const text = `window.__ENV__=${
            JSON.stringify(__ENV__).split(",").join(",\n")
        }
    `
        const buffer = require('buffer');
        const fs = require("fs")
        //写入
        fs.writeFileSync(Path, new Uint8Array(buffer.Buffer.from(text)))
    }
}