webpack 多人开发个人代理及域名配置

webpack 多人开发 个人代理及域名配置

当多人协作开发时，尤其是多个前端，多个后端同时开发，每个人的webpack配置（接口、域名、端口、代理等）都是不同的，就会造成每个人的开发变得很不很不方便：

1. git拉取或提交时总会造成冲突，每次都需要修改config文件夹下的index.js文件
2. git拉取后每次启动项目，都需要将webpack修改成自己的配置，贼麻烦。

解决办法：

首先在config文件夹下新建文件personal.config.js

image.png

上代码：

/*
可根据本机特征来自动获取相应的配置

1.电脑主机名 @os.hostname()
2.电脑类型 @os.type()
3.本机ip  @IPv4

*******20200807*******
配置文件优化了一下，没有的自己添加下, 有错误的自己修改下;

*/



const os = require('os')
const personalConfig = {

    hostname: os.hostname(),

    default() {
        return {
            username: 'default',
            target: 'https://www.****.xyz/',
            host: 'localhost',
        }
    },


    'xzjMacBook-Pro.local'() {
        return {
            username: 'xzj',
            target: 'https://www.****.xyz/',
            host: this.getHost(), // can be overwritten by process.env.HOST。。。
        }
    },

    'dxs'() {
        return {
            username: 'dxs',
            target: 'https://www.***.com.cn/',
            host: this.getHost(), // can be overwritten by process.env.HOST。。。
        }
        
    },

    'gy'() {
        return {
            username: 'gy',
            target: 'https://www.****.xyz/',
            host: this.getHost(), // can be overwritten by process.env.HOST
        }
    },

    'dakache'() {
        return {
            target: 'http://www.****.xyz/',
            host: this.getHost(), // can be overwritten by process.env.HOST
        }
    },
    ssm() {
        return {
            target: 'https://www.****.xyz/',
            host: this.getHost(), // can be overwritten by process.env.HOST。。。
        }
    },

    'Asus'() {
        return {
            username: 'llg',
            // target: 'http://www.***.xyz/',
            host: this.getHost() // can be overwritten by process.env.HOST
        }
    },

    'MacBook-Pro.local'() {
        return {
            username: 'zy',
            target: 'https://www.****.xyz/',
            host: this.getHost(), // can be overwritten by process.env.HOST。。。
        }
    },

    getConfig() {
        return this[this.hostname] && this[this.hostname]() || this['default']()
    },
    
    getHost() {
        const interfaces = os.networkInterfaces();
        for(let devName in interfaces){
            const interface = interfaces[devName];
            for(let i=0; i < interface.length; i++){
                const alias = interface[i];
                if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
                    return alias.address;
                }
            }
        }
    }
}

module.exports = personalConfig

然后在config文件夹下的index.js中引入并配置

image.png

每个人只需要改自己的配置就行了，项目从git上拉下来，直接就可以运行，不需要每次改成自己的配置了