最近突然想到一个问题，在webpack中我们添加plugin是以数组的形式添加的，那么如何保证这些插件的执行顺序呢，比如一个插件依赖需要等另一个插件改完，比如一个插件和另一个插件是可以并行的，于是从源码从去探析出了结果。 插件是webpack的支柱，webpack实际自身也是基…

在上一篇文章Webpack配置全解析介绍了Webpack中loader和plugins的一些基本用法，当loader和plugins使用较多后项目也会越来越耗时，因此这次我们继续学习如何优化webpack的配置来让我们的项目运行的更快耗时更短。 本文将从缩小文件搜索范围、减少打…

作用域的概念是理解js的关键所在，但是大部分刚入们的同学，都像曾经的我一样，对其一知半解，甚至从未听闻。不管从性能角度还是从功能角度，作用域都非常关键。 1、首先我们要清楚，每一个js函数都表示为一个对象，他们都是Function对象的一个实例。Function对象同其他对象一…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…

本文适合2~4年的前端开发人员的进阶，且对vue或者react搭配webpack有一定的经验。如果webpack的基本使用都未了解，建议实践后再看本文。 本文是原创，均为本人手写。部分思维, 借鉴了“宫小白”的webpack文章。文章结尾标注了“感谢”。 此前有人关心博客源码的…

这里会有选择是 React/Vue/JavaScript，我们统一都先选择 JavaScript。选完后会在项目的根目录下新建一个 .eslintrc.js 配置文件 @babel/parser 是 Babel 中使用的 JavaScript 解析器。

Create React App（以下简称 CRA）是创建 React 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。 下面对这几种方式分别进行介绍。 执行…

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。

相信大家都知道TypeScript的好处~ TypeScript编译工具可以运行在任何服务器和任何系统上，TypeScript增加了代码的可读性和可维护性，很值得我们学习！ 下边我将带大家一步步实现T