type
status
date
slug
summary
tags
category
icon
password
一、前言
上一篇讲到 Tree Shaking 相关的内容，本篇将介绍在不同模式（或称环境）下的打包处理。
二、不同环境下的打包配置
1. 开发环境的配置
2. 生产环境的配置
通过观察，我们会发现不同模式下的配置实际上存在了大量的重复代码，那么对于这些重复的代码就需要将它们分离出来共用，提高代码效率。
三、webpack-merge
这个插件就可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就节约了大量的代码书写。
插件安装：
1. 共用配置
新建一个文件 webpack.common.config.js（文件名可以自己起），用于编写共用配置。
2. 开发环境的配置
新建文件：webpack.dev.config.js
3. 生产环境的配置
新建文件：webpack.prod.config.js
四、package.json 的设置
在完成配置以后，我们还需要写一些脚本，方便运行打包。
注意：
- 一般我们会把两个配置文件放在一个叫做 build 的文件夹中。
- 配置 dev 和 build 命令时，要看清楚 dev 是需要启动本地服务器的，所以要在 webpack 后面添加 serve；而 build 是生产环境打包，不需要开本地服务器，直接写 webpack 进行打包就行。
- 记得添加
--config来自己指定配置文件，同时也要注意文件的路径。
小结
- 安装 webpack-merge
- 在 webpack.common.config.js 中编写共用配置
- 在 webpack.dev.config.js 中编写开发配置，并利用插件与共用配置合并
- 在 webpack.prod.config.js 中编写生产配置，并利用插件与共用配置合并
- 配置完成后，编写 npm 脚本指令
- 更简洁的配置方式可以参考： https://www.npmjs.com/package/webpack-merge
以上，如有谬误，还请斧正，希望这篇文章对你有所帮助，感谢您的阅读～
- 作者:Eric 见嘉
- 链接:https://tangly1024.com/article/webpack5-envbundle
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章