展开运算符 ... Chainable 以able 为后缀表示具有什么能力。这个库维护了 parent ,用end来实现链式。很像jq的end(). ChainedMap.js ChainedSet.js 这两个里面分别包装了 js 原生的 Map, Set 结构。 打开这个文…

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

Q1:tapable解决的问题？tapable是个独立的库webpack中大量使用了这个库tapable主要是用来处理事件，解决的问题有点类似EventEmitter，不过功能更加强大Q2:tapab

最近朋友圈被《头号玩家》刷爆了，斯皮尔伯格一个资深电影导演，把对过去经典的致敬，对未来的憧憬浓缩在这一部电影中，可以说让观众燃了起来。 观望整个前端开发，不断的演化，发展迅速。前端开发从最开始切页面, 前端自动化构建工具日新月异，从最初的Grunt,Gulp到现在前端项目可以说…

webpack的成功之处，不仅在于强大的打包构建能力，也在于它灵活的插件机制。 也许你了解过webpack的插件与钩子机制；但你或许不知道，webpack内部拥有超过180个钩子，这些钩子与模块（内置插件）之间的「创建」「注册」「调用」关系非常复杂。因此，掌握webpack内部…

上篇文章主要讲了 loader 的配置，匹配相关的机制。这篇主要会讲当一个 module 被创建之后，使用 loader 去处理这个 module 内容的流程机制。首先我们来总体的看下整个的流程： 在 module 一开始构建的过程中，首先会创建一个 loaderContext…

webpack的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。 本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。 webpack 有时候…

webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。本文主要介绍一下Tapable中的钩子函…

对于Webpack有一句话Everything is a plugin，Webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable。Tapable有点类似nodejs的events库，核心原理也是依赖与发布订阅模式。webp…