前言
在前端工程化中，webpack 已经成为了必不可少的工具。webpack 可以通过配置文件来完成各种功能，但是在实际开发中，我们往往需要针对不同的环境（如开发环境、测试环境、生产环境等）进行不同的配置。这时候，我们就需要使用 webpack-merge 来合并公用配置和环境配置。
webpack-merge 是什么？
webpack-merge 是一个用于合并 webpack 配置的工具。它可以将多个配置对象合并成一个，从而方便进行配置的管理和维护。webpack-merge 具有以下特点：
- 可以合并多个配置对象；
- 可以根据配置对象的顺序进行覆盖；
- 可以通过自定义的合并策略来控制合并的行为。
webpack-merge 的使用
webpack-merge 的使用非常简单，只需要在 webpack 配置文件中引入 webpack-merge，然后使用 merge 函数即可。
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.config.js');
const devConfig = require('./webpack.dev.config.js');
module.exports = merge(commonConfig, devConfig);上面的代码中，我们首先引入了 webpack-merge 模块，并且分别引入了公用配置和开发环境配置文件。然后，我们使用 merge 函数将这两个配置对象合并成一个。
webpack-merge 的合并策略
webpack-merge 的默认合并策略是覆盖，即后面的配置对象会覆盖前面的配置对象。但是，在某些情况下，我们可能需要对某些配置项进行特殊处理。这时候，我们可以使用自定义的合并策略来控制合并的行为。
webpack-merge 的自定义合并策略非常灵活，可以根据不同的需求来编写不同的合并策略。下面是一个例子，演示了如何自定义合并策略：
-- -------------------- ---- -------
----- ----- - -------------------------
----- -------------- - ----- ------- ------- -- -
-- ---- --- -------- -
------ ----------------- ------- --------
-
------ ----------
--
----- ------------ - -
------ -
---- ---------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
--
----- --------- - -
------ -
---- ---------------
--
----- --------------
--
-------------- - -------
---------------
---------------- -----------上面的代码中，我们首先定义了一个 customizeMerge 函数，它接受三个参数：key、value1 和 value2。当 key 为 entry 时，我们将 value1 和 value2 合并成一个新的对象返回。否则，返回 undefined。
然后，我们定义了两个配置对象：commonConfig 和 devConfig。commonConfig 包含了一个 app 入口，而 devConfig 包含了一个 dev 入口和一个 mode 属性。
最后，我们使用 merge 函数来合并这两个配置对象，并且传入了一个 options 对象，其中包含了我们自定义的合并策略 customizeMerge。
总结
webpack-merge 是一个非常实用的工具，它可以帮助我们管理和维护 webpack 配置。通过使用 webpack-merge，我们可以将多个配置对象合并成一个，并且可以根据需要自定义合并策略。这样，我们就可以更加方便地进行 webpack 配置的管理和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6562a6e4d2f5e1655dc78a50