前言
在前端工程化中，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 的自定义合并策略非常灵活，可以根据不同的需求来编写不同的合并策略。下面是一个例子，演示了如何自定义合并策略：
// javascriptcn.com 代码示例
const merge = require('webpack-merge');
const customizeMerge = (key, value1, value2) => {
if (key === 'entry') {
return Object.assign({}, value1, value2);
}
return undefined;
};
const commonConfig = {
entry: {
app: './src/app.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
const devConfig = {
entry: {
dev: './src/dev.js',
},
mode: 'development',
};
module.exports = merge({
customizeMerge,
})(commonConfig, devConfig);上面的代码中，我们首先定义了一个 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