本文将对AST结构、Babel工作原理等方面作介绍，结合目前Babel & AST常见的应用场景做分析，帮助同学们了解Babel & AST在实际开发过程中的用途。

上一篇文章《深入理解webpack原理（上）》中，我主要是从理论层面上介绍了webpack的一些基本原理。而本文将会从代码层面上带大家一起来认识webpack。 由于webpack的打包过程实际上是利用了AST语法树来实现的，因为在具体讲解webpack打包原理之前，我们一起来…

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个…

webpack 是我们前端工程师必须掌握的一项技能，我们的日常开发已经离不开这个配置。关于这方面的文章已经很多，但还是想把自己的学习过程总结记录下来。 上一篇文章介绍了webpack 构建原理，这篇文章将基于这个原理之上，讲述在我们实际工程配置中可以去优化的2 个方向。 优化构…

在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。 当时看的有点懵， 于是又补了下相关知识， 发现原来packag…

几个月前，我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4。我们的主要目标之一是利用 tree-shaking 的优势，即 Webpack 去掉了实际上并没有使用的代码来减少包的大小。现在，tree-shaking 的好处将根据你的代码库而有所不同。由…

其他的非公共代码。 all: 不管文件是动态还是非动态载入，统一将文件分离。当页面首次载入会引入所有的包 async： 将异步加载的文件分离，首次一般不引入，到需要异步引入的组件才会引入。 initial：将异步和非异步的文件分离，如果一个文件被异步引入也被非异步引入，那它会被…

大家在看webpack源码的时候，有没有感觉像再看天书，似乎没有办法一个文件比如webpack.js从头看到尾。感觉webpack的跳跃性很强，完全不知道程序在运行的时候，发生了什么。完全不清楚这个事件是什么时候发生的，比如loader是什么时候执行的，plugin又是什么时候…

Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。本文将尝试探索 webpack plugin，揭秘它的工作原理，以及如何开发一个 plugin。 通过插件我们可以扩展 web…