Webpack 基于 tapable 构建了其复杂庞大的流程管理系统，基于 tapable 的架构不仅解耦了流程节点和流程的具体实现，还保证了 Webpack 强大的扩展能力；学习掌握tapable，有助于我们深入理解 Webpack。 个人觉得 tapable 是一个基于事件…

基于 webpack 的持久化缓存方案

随着Babel、TypeScript、VueLoader、Terser等编译、转译技术的大规模使用，Webpack的编译时间正不断膨胀。为了优化编译速度，社区主要有两种方案： 这些方案在一定程度上解决了编译速度慢的问题，但随之而来的是成堆的配置，严重影响了Webpack的使用体…

1. 前言 现在初入前端的同学们，都直接就上手webpack了，而在几年前没有node还是jquery打天下的时候，不借助node或软件让不同js文件之间互相引用、模块化开发，是件很麻烦的事。 接下来会介绍两个有名的工具AMD（require.js）和CMD（sea.js），虽…

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对…

继上回介绍了如何开发webpack loader 之后。趁热打铁，来继续看下webpack另一个核心组成：plugin。 下面也和loader一样，让我们一起从基本的官方文档着手看起。 loader : 顾名思义，某种类型资源文件的加载器，作用于某种类型的文件上。webpack…

App往往有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过Tree shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 关于Tree shaking的原理，在Tree S…

后者很容易理解，因为chunk在webpack中的含义就是模块，那么chunkhash根据定义来就是模块内容计算出来的hash值。 这里我们还得提一个问题，比如像vue这些框架，把js和css共同放在一个里面会时，我们一般会用一个插件叫extract-text-webpack-…

标题我们写上了Webpack 新特性实战尝鲜的第二季，那么肯定就有第一季了( Webpack5.0 新特性尝鲜实战 🦀🦀【第一季】)。距离写上一篇文章已经超过了一年的时间，那时候还是major版，我们先来总结一下吧： 老袁写这篇文章的时候现在的版本是 v5.0.0-beta…