一、前言

前端项目常常使用到webpack，我们通常将开发环境和生产环境的公共配置会抽离出来，然后基于公共配置通过webpack-merge合并开发或者生产环境的特有配置，生成完整的开发或者生产环境配置。
webpack-merge的合并规则是什么样的呢，在webpack-merge的npm中有详细的使用文档，链接是https://www.npmjs.com/package/webpack-merge，其中提到其用法。

官方解释

二、个人理解和代码示例

1、个人理解

let a = {
  name:{}
}
let b = {
  name:''
}

比如上述代码中a和b的都具有name属性，但是a的name的值是一个对象，但是b的name的值是一个字符串，那么合并之后的结果，一定是后面的b对象的name属性值覆盖前面的整个a的name的对象，也就是合并后的对象为

{
  name:''
}

也就是说，如果数据类型不一样，后面的直接完全覆盖前面的，如果两者都是基础数据类型，后面的也会覆盖前面的（这里省略）。如果两者都是数组的话：

let a = {
  age:[1,2]
}
let b = {
  age:[3,4,5]
}

就会把两个数组进行合并，结果就是

{
  age:[1,2,3,4,5]
}

如果两者都是对象，比如

let a = {
  detail:{
    location:'Chengdu'
  }
}
let b = {
  detail:{
    district:'ShuangLiu'
  }
}

a对象和b对象都有一个detail属性，并且都是对象，而我们一开始合并的a对象和b对象不都是对象么，其实规则是一样的，在a对象和b对象合并的过程中，a和b的键值对key如果不同，当然都会保留下来，到最终合并后的对象中，所以a的detail的location和b的detail的district自然最后会合并到一起，所以查看后面的完整代码示例就可以完全弄清楚webpack-merge的合并规则了。

2、代码示例

const { merge } = require('webpack-merge'); 
let a = {
  name:{},
  age:[1,2],
  detail:{
    location:'Chengdu'
  }
}
let b = {
  name:'',
  age:[3,4,5],
  detail:{
    district:'ShuangLiu'
  }
}
console.log(merge(a,b));

可以在包含上面代码的js文件的目录中，npm init，然后npm install webpack-merge然后运行一下上述代码，可以发现结果如下。

合并结果

3、对比Object.assign

let a = {
  name:{},
  age:[1,2],
  detail:{
    location:'Chengdu'
  }
}
let b = {
  name:'',
  age:[3,4,5],
  detail:{
    district:'ShuangLiu'
  }
}
console.log(Object.assign(a,b));

Object.assign

而Object.assign是直接后面的覆盖前面的，就是浅拷贝（普通值类型谈不上深浅拷贝一说），这一点和spread运算符是一致的，这里展示一下其浅拷贝。

let a = {
  name:{},
  age:[1,2],
  detail:{
    location:'Chengdu'
  }
}
let b = {
  name:'',
  age:[3,4,5],
  detail:{
    district:'ShuangLiu'
  }
}
console.log(Object.assign(a,b),'assgin return');
console.log(a,'a');
b.detail.district = 'WuHou';
console.log(a,'after modify b')

Object.assign的浅拷贝

可以看到，修改了b的detail对象的属性，a的detail也发生了改变，证明其是浅拷贝，这里引入一个npm的包extend，可以用来执行深拷贝，这里给出代码。

const extend = require('extend');
let a = {
  name:{},
  age:[1,2],
  detail:{
    location:'Chengdu'
  }
}
let b = {
  name:'',
  age:[3,4,5],
  detail:{
    district:'ShuangLiu'
  }
}
console.log(extend(true,a,b),'deepCopy return');
console.log(a,'a');
b.detail.district = 'WuHou';
console.log(a,'after modify b')

extend的深拷贝

可以看到不会再影响了。