2019 年的前端技术栈，无论你是用 Vue 还是用 React ，应该都离不开一样工具 – webpack。webpack 极大的简化了前端开发的构建过程，只需提供一个入口文件，webpack 就能自动帮我们分析出相关依赖，构建出 bundle 包。

webpack 很强大，但是大家知道 webpack 到底是怎么样打包的吗？本文将从一个很简单的例子，一步步带领大家探寻 webpack 打包的基本原理。

目前主流的前端框架在开发的时候都采用最新的 ES6+ 语法，大部分的向下兼容工作都交给了 Babel 来处理。通过引入 Babel 插件，我们可以大胆地使用最新或是正在起草中，甚至是根本不在标准中的 jsx 等语法，跟甚至是你自己胡诌的写法！

本文将带大家了解 Babel 是怎么工作的、Babel 插件是怎么工作又是怎么编写的，并写一个与 webpack 集成的最简单的 Babel 插件。