解決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)))
    }
}