随着前端工程化的不断发展，构建工具也在不断完善。作为大前端时代的新宠，webpack渐渐成为新时代前端工程师不可或缺的构建工具，随着webpack4的不断迭代，我们享受着构建效率不断提升带来的快感，配置不断减少的舒适，也一直为重写的构建事件钩子机制煞费苦心，为插件各种不兼容心灰…

祸兮福之所倚，福兮祸之所伏。——老子 bundle、module、chunk 都是 webpack 中的术语，下面就一个一个介绍他们的定义是什么，怎么产生的。 Bundle是由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。 **Bundle 分离…

相信很多vue新手，都像我一样，只是知道可以用vue-cli直接生成一个vue项目的架构，并不明白，他究竟是怎么运行的，现在我们一起来研究一下。。。 需要注意的是项目的名称不能大写，不然会报错。 Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里…

这篇文章的主题是vue-cli的理解。或许，很多人在开发vue的时候，我们会发现一个问题——只会去用，而不明白它的里面的东西。现在的框架可以说是足够的优秀，让开发者不用为搭建开发环境而烦恼。但是有时候，我们还是得回到原始生活体验一下，才能够让自己更上层楼，希望大家共勉。如果你喜…

JavaScriptParser是把js源码转化为抽象语法树的解析器。常用的JavaScript Parser： 其中webpack就是使用的acorn将源代码解析成AST进行操作。 loader是webpack用来处理加载不同资源文件的插件，它只在webpack对资源文件进行…

AST 是一个非常基础但是同时非常重要的知识点，我们熟知的 TypeScript、babel、webpack、vue-cli 得都是依赖 AST 进行开发的。本文将通过 AST 与前端工程化的实战向大家展示 AST 的强大以及重要性。 第一次看见 AST 这个概念的时候还是在《…

1. loader 十问 在我学习webpack loader的过程中，也阅读了网上很多相关文章，收获不少。但是大多都只介绍了loader的配置方式或者loader的编写方式，对其中参数、api及其他细节的介绍并不清晰。 也许你也会有类似的疑问。下面我会结合loader相关的部…