webpack-merge 用法

配置分离

官网地址传送门：https://webpack.docschina.org/guides/production#setup

1. 背景 开发环境：

• 需要实时加载 love reloading
• 热模块替换 hot module replacement
• 等等 生活环境关注点：
• 压缩 bundle
• source map
• 资源优化
• 等等 两者关注点的不同，配置文件会有些许差异，需要把重复的代码分离开；

2. 安装

npm install --save-dev webpack-merge

3. 配置文件 新建 config 文件夹，里面包括这几个文件

// 公共的配置文件
webpack.base.conf.js （webpack.common.conf.js）
// 开发环境下的配置文件
webpack.dev.conf.js
// 生产环境下的配置文件
webpack.prod.conf.js

4. 使用

// 在文件中导入 `webpack-marge` 模块
const { merge } = require('webpack-merge');
// 导入公共文件
const common = require('./webpack.common.js');
// 使用
module.exports = merge(common, {
    mode: 'production',
});