如果你是一名前端开发者并且使用过Webpack，那么你一定知道Webpack配置中的代码重复问题。为了解决这一问题，webpack-merge成为了一个非常流行的npm包。在本文中，我将介绍如何使用webpack-merge来简化Webpack配置以及避免重复代码。
webpack-merge简介
webpack-merge是一个可以合并多个Webpack配置对象的工具。通过使用webpack-merge，我们可以把多个相似的Webpack配置文件合并成一个，并且避免重复配置。
安装和使用
首先，在你的项目中安装webpack-merge：
npm install --save-dev webpack-merge
接下来，我们需要创建不同的Webpack配置对象。假设我们有两个Webpack配置文件：base.config.js和prod.config.js。其中，base.config.js包含了所有环境通用的配置，而prod.config.js只包含了生产环境特有的配置。
-- -------------------- ---- -------
-- --------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ----------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
--
--
--
---- -------------------- ---- -------
-- --------------
----- -------------- - -----------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
----- -------------
------------- -
---------- ---- ------------------
--
-------- ---- ----------------------
--现在，我们需要将这两个Webpack配置对象合并成一个。为此，我们可以创建一个名为webpack.config.js的文件，并使用webpack-merge导入和合并这两个配置对象。
// webpack.config.js
const merge = require('webpack-merge');
const baseConfig = require('./base.config');
const prodConfig = require('./prod.config');
module.exports = merge(baseConfig, prodConfig);如上所示，我们通过使用webpack-merge包中的merge函数将baseConfig和prodConfig对象合并成一个新的对象，并将其导出为Webpack配置对象。
请注意，在这里，我们首先导入了base.config.js和prod.config.js配置对象，然后使用merge函数将它们合并成一个对象，新的对象优先采用prod.config.js中定义的值。通过这种方式，我们可以避免重复配置，并减少Webpack配置文件的体积。
示例代码
接下来，让我们看看如何在实际项目中使用webpack-merge。假设我们有一个React应用程序，并且希望在生产环境中使用Tree Shaking来消除未使用的代码。为此，我们可以按照以下步骤操作：
- 安装Webpack和React：
npm install --save-dev webpack webpack-cli react react-dom
- 安装其他依赖项：
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react webpack-dev-server html-webpack-plugin uglifyjs-webpack-plugin clean-webpack-plugin webpack-merge
- 创建
webpack.config.js文件：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----- - -------------------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- -------------- - -----------------------------------
----- ---------- - ---------------------------------
----- ---------- - -
----- -------------
------------- -
---------- ---- ------------------
--
-------- -
--- ---------------------
--- -------------------
--------- --------------------
--------- -------------
------- -------
---
--
--
----- ------ - ----------------- ------------
-------------- - -------- 创建
webpack.base.config.js文件：
// > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/42439) ，转载请注明来源 [https://www.javascriptcn.com/post/42439](https://www.javascriptcn.com/post/42439)