es6 module是js语言原生的模块化方案，但是由于浏览器的兼容问题，需要webpack对我们写好的模块代码进行处理，可以让浏览器识别我们写的模块代码。 因为浏览器端是没有commonJS规范相关的module,exports,require变量，而且该规范是同步加载模块的…

当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时才开始加载，这就是按需加载。要实现按需加载，我们一般想到的方法：动态创建script标签，并将src属性指向对应的文件路径。但是在实现过程中，存在下面问题： ​ webpcak 的按需加载已经完美解决了上述问题…

对于随着功能而使用的代码，可以先拆分出来打包到一个单独的js文件中（代码分割），然后在使用时动态创建script标签进行引入。

前端代码在使用​webpack​进行打包时，经常会做两种优化：把稳定的库代码（如​react​、​antd​等）与业务代码分离，业务代码的更改不影响用户本地的库代码缓存，同时也把一个大文件拆分成多个文

大多数情况下，我们并不关心 webpack 是怎么做异步加载的，但是作为前端开发工程师我们需要对异步加载有一定的了解。 在讲解之前，先让我们搭建一个简单的webpack工程。 这里我使用了webpack-chain的方式配置 webpack。有兴趣的朋友可以去了解一下。 在讲解…

Chunk 是什么？Webpack 如何根据 entry、异步模块、runtime 配置组装 Chunk？

先来一波名词解释。先上网上一张图解释： 1、module：我们源码目录中的每一个文件，在 webpack 中当作module来处理（webpack 原生不支持的文件类型，则通过 loader 来实现）。module组成了chunk。 2、chunk。webpack打包过程中的产…

本文继续剖析 Webpack 的实现原理，主要内容：ChunkGraph 构建完毕后，Webpack 接下来会做什么事情？什么是运行时？如何收集运行时依赖？

webpack是一个强大而复杂的前端自动化工具。其中一个特点就是配置复杂，这也使得「webpack配置工程师」这种戏谑的称呼开始流行🤷但是，难道你真的只满足于玩转webpack配置么？ 显然不是。在学习如何使用webpack之外，我们更需要深入webpack内部，探索各部分的…