大家好，我是 simple ，最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。(完整配置在后面)

Webpack 一直都是有些人的心魔，不清楚原理是什么，不知道怎么去配置，只会基本的 API 使用。它就像一个黑盒，让部分开发者对它望而生畏。 而本节最大的作用，就是帮大家一点一点的消灭心魔。

阿里三面的时候被问到了这个问题，当时思路虽然正确，可惜表述的不够清晰 后来花了一些时间整理了下思路，那么如何实现给所有的async函数添加try/catch呢？

人之所以不快乐，主要是缘于过去和未来：**为过去耿耿于怀**，**为未来惴惴不安** 今天，我们选择了一个在前端范围内，占很大比重的构建工具--`Webpack`。

webpack的工作流程就好像是一条生产流水线，源文件需要经过一系列处理流程进行处理后才能转换为输出结果。而插件，简单来说就是额外插入到流水线上的一个处理流程！

1. 基础 -- 会配置 2. 进阶 -- 能优化 3. 深入 -- 懂原理 一层层晋级打怪 🦖 ，解答不同深度的 Webpack 面试题问题 🤓

今天给大家介绍社区当中一个 webpack 的流式配置方案——webpack-chain，这个方案现在已经在我目前所在的团队落地，且带来了一些正向的收益。

1. webpack 运行流程图 2. 研究 webpack 源码的好处 3. webpack 插件 4. webpack 入口 5. compile 6. compilation 这里使用 SingleEntryPlugin 作为例子，配置单入口时会使用此插件，插件往 mak…

前不久写了一篇webpack基本原理和AST用法的文章，本来想接着写webpack plugin的原理的，但是发现webpack plugin高度依赖tapable这个库，不清楚tapable而直接去看webpack plugin始终有点雾里看花的意思。所以就先去看了下tapa…