背景

最近遇到一个项目是根据git不同分支使用不同的配置文件，只能从dev向test环境合并代码，而且不能对配置文件进行修改，使用起来问题很多。所以写了一个webpack插件解决这个问题：

思路

由于项目中在不同环境的前缀都是相同的，比如dev就是dev-x, test就是test-x。
第一步我们需要想办法获取git分支的名字，可以通过以下方法获得：

// 根目录下获取.git文件
    fs.readFileSync(
        path.join(fs.realpathSync(process.cwd()), '.git/HEAD'),
        'utf-8'
    )
    const gitHEAD = gitPath.trim();
    const environment = gitHEAD.split('/')[2];

第二步判断属于什么分支，通过正则即可获得是属于某个环境的分支:

    // 判断是否属于dev分支
    /dev/.test(environment) 

第三步我们需要将node环境传到browser环境，这时会用到DefinePlugin这个插件:

    if (this.envs.includes(environment)) {
        new DefinePlugin({ ENV: JSON.stringify(environment) }).apply(
            compiler
        );
    }

第四步就是看结果了：

    // example.js
    console.log('ENV',ENV);
    // 可以在打包好的文件中看到变化
    console.log("ENV","master")

结尾

第一次在掘金写博客，博客里的代码比较少，主要是串了一下思路，这种需求比较小众，比较大众的做法应该是在docker中进行build操作，直接通过.env文件进行环境判断。代码已上传到github，有需求的小伙伴别忘了点个star。目前还没有传到npm，如果有需要，可以留言联系我。