hash通常被作为前端静态资源实现增量更新的方案，通过在文件名中带上一串hash字符串，告诉浏览器该文件是否发生更新，从而决定是否要使用缓存机制。 webpack打包时的hash有三种：fullhas

过程及时深度遍历整个AST,然后构建转换后的代码字符串。

将我的研究成果，画一个简要的流程图，如果您有兴趣看完，回头再看看这个流程图。 图片里的方块中文字的序号，就是运行的顺序。 通过我们以往对tapable的了解，知道可以通过钩子来监听Tapable类相应的事件，我们做相应的处理就行了。 写插件关键的问题不是注册钩子，而是compi…

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？ Plugins：Loaders将各类型的文件处理成webpack能够处理的模块，plugins有着很强的能力。…

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

在webpack中，我们发现配置我们能天然的使用esmodule这种模块化语法，那大家有没有好奇过呢？他究竟是怎么实现的呢？下面一起来探究一下，webpack究竟是怎么解析打包esmodule语法的。 我们在编写上方的webpck的方法时，我们发现他除了解析入口的代码，其实各个…

在上一篇文章中分享了关于运用webpack搭建vue项目的经验和总结，但还仅仅停留在只是会用webpack搭建脚手架的阶段，对webpack原理还是不怎么清楚，再加上各大论坛对webpack原理解析的精品文章较少，要么是一些标题党，通篇教你如何配置webpack，如何优化；要么…

emitFile() 执行时触发 - 生成资源到 output 目录之前。 emitFile() 执行时触发 - 生成资源到 output 目录之前。

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