前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…

Module Federation的起源项目为webpack-external-import，现已经并入 Webpack5, v2.2.4为最后独立发布的版本。 原文为PPT，章节为本人划分。 部分图片转换为文字翻译插入文章中。 个人添加的内容标记为"注"。 Module Fe…

带你深度解锁Webpack系列(基础篇) 和 带你深度解锁Webpack系列(进阶篇)，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对 Webpack 的配置进行优化。 本文罗列出了十多种优化方式…

三篇长文带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每…

虽然写了很长一段时间的Vue了，对于CSS Scoped的原理也大致了解，但一直未曾关注过其实现细节。最近在重新学习webpack，因此查看了vue-loader源码，顺便从vue-loader的源码中整理CSS Scoped的实现。 本文展示了vue-loader中的一些源码…

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。 bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。 学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如…

loader是一个函数，用来把文件转换成webpack识别的模块。 this.callback，一个可以同步或者异步调用的可以返回多个结果的函数。 当使用一个loader时，这个loader函数只有一个参数，参数是包含文件内容的字符串。 当配置多个loader时，loader的…

webpack早就已经在前端领域大放异彩，会使用和优化webpack也已经是中、高级工程师必备技能，在此基础之上再对webpack的原理进行理解和掌握，必定会在未来的开发中事半功倍。若是对于webpack不熟悉可以查看之前的文章进行学习和了解。 由于本人能力一般、水平有限，所以…

这些都是需要解决的问题，出现了问题，怎么样预警，通知到开发，是不是能做到智能的处理，都是后面需要考虑的，所以还有很多任务要做，有了新的进展，我会同步记录下来。 这周九天班，赶紧睡觉去了。