｜д•´)!! 这里是属于webpack的世界，没有花哨艳丽的vite，有的，仅仅是繁衍到巅峰的webpack！

本篇文章主要记录了webpack最常用的配置，包括开发环境的配置，生产环境的配置。还记录了常用的优化手段，包括构建速度优化和体积优化。

说到构建工具，小编最开始接触的是 Webpack4。后来看到 Vite 大火，又和很多人一样，去研究了一下 Vite。在研究 Vite 的过程中，发现 Vite 内部使用了 Rollup 和 Esbu

在上一篇文章 如何快速成为一名熟练的 Webpack 配置工程师 - 上篇 中 ，小编完成了对 entry、resolve、module、optimization、output 这 5 个配置项的梳理

相信不少小伙伴都有听说过这样一个名词 - Webpack 配置工程师。😂，都需要设置专门的岗位去维护了，可见 Webpack 的配置是有多么复杂。 现实也确实如此。发展到现在 5.x 版本， Webp

谈到构建工具，大家首先想到的肯定就是 Webpack 以及现在最🔥的 Vite。Webpack，功能强大，生态丰富，从面世到今天，一直是很受大家欢迎；Vite采用

webpack5现在开箱即用能力相对之前增强了很多，但是依然不是理想（相对于parcel），但是parcel却缺少像webpack这样的高度配置灵活性，权衡之下我决定对webpack的配置文件

什么是 Tree shaking？ Tree shaking 的概念最早是由 Rollup 工具提出来的，再后来 webpack2 也实现了相应的功能。 MDN 定义： 就好比一颗果树，有很多的分树枝

webpack 打包优化并没有什么固定的模式，一般我们常见的优化就是拆包、分块、压缩等，并不是对每一个项目都适用，针对于特定项目，需要不断调试不断优化。 对于 webpack4，建议从零开始配置，在项目初期，使用 webpack4 默认的配置。 接下来，本篇文章会列出所有适用于…