持久化缓存是 webpack5 所带来的非常强大的特性之一。一句话概括就是构建结果持久化缓存到本地的磁盘，二次构建(非 watch 模块)直接利用磁盘缓存的结果从而跳过构建过程当中的 resolve、build 等耗时的流程，从而大大提升编译构建的效率。

在使用 webpack-dev-server 的过程中，如果指定了 hot 配置的话（使用 inline mode 的前提下）， wds 会在内部更新 webpack 的相关配置，即将 HotModuleReplacementPlugin 加入到 webpack 的 plugins 当中。

@vue/cli 项目编译重复命中缓存问题解析 文章首发于个人blog，欢迎关注~ 背景 最近遇到一个更新了 package，但是本地编译打包后没有更新代码的情况，先来复现下这个 case 的流程： A 同学在 npm 上发布了0.1.0版本的 package； B 同学开发了一个新的 feature，并发布0.2.0版本； C 同学将本地的0.1.0版本升级到0.2.0版本...

文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack Loader 详解 前2篇文章主要通过源码分析了 loader 的配置，匹配和加载，执行等内容，这篇文章会通过具体的实例来学习下如何去实现一个 loade...

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

文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack loader 详解 loader 的配置 Webpack 对于一个 module 所使用的 loader 对开发者提供了2种使用方式： webpack config 配置形式，形如： {代码...

webpack提供的一个非常强大的功能就是code spliting(代码切割)。 在webpack 1.x中提供了 {代码...} 利用require.ensure这个API使得webpack单独将这个文件打包成一个可以异步加载的chunk. 具体的套路见我写的另一篇blog: webpack分包及异步加载套路 一句话总结就是： 在输出的runtime代码中,包含了异步chunk的id及chunk n...

最近一个小项目是用webpack来进行构建的。其中用到了webpack分包异步加载的功能。今天抽时间看了下webpack打包后的文件，大致弄明白了webpack分包及异步加载的套路。

配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replace，即每次webpack编译之后，你还需要手动刷新浏览器。