腾讯文档从功能层面上来说，用户最熟悉的可能就是word、excel、ppt、表单这四个大品类，四个品类彼此独立，可能由不同的团队主要负责开发维护，那从开发者角度来说，四个品类四个仓库各自独立维护，好像事情就很简单，但是现实情况实际上却复杂很多。我们来看一个场景： 对于复杂的权限…

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新 一种是页面刷新，不保留页面状态，就是简单粗暴，直接 window.location.reload()。 另一种是基…

本文主要介绍webpack 5 的新特性之一 "module federation"(联邦模块)，涉及联邦模块特性、使用方法、适用范围。 webpack 5引入联邦模式是为了更好的共享代码。 在此之前，我们共享代码一般用npm发包来解决。 npm发包需要经历构建，发布，引用三阶…

如上，我们创建一个 webpack plugin，通过监听 webpack hooks 在任务执行之前修改对应的资源路径，通用性上升。 此外之前的博客我们还引入了 cdn 的概念，我们可以将上述插件升级，构建的时候引入通用的 cdn 资源，减少构建与加载时间。 上述我们借助了 …

项目中一直用的都是webpack，前一段需要开发几个类库供其他平台使用,本来打算继续用webpack的，但感觉webpack用来开发js库，不仅繁琐而且打包后的文件体积也比较大。正好之前看vue源码，知道vue也是通过rollup打包的。这次又是开发类库的，于是就快速上手了ro…

这一切的起因都是因为那只pm，整个一个奇奇怪怪的需求，然后发现需要写库了，就在我流利的初始化项目时，突然脑抽风的发现，library配置貌似不太对，libraryTarget配置貌似也不太对，所以还是停下来吧，好好分析回顾一下，阿西吧。 先来回顾一下，library是指定义一个…

Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。本文将尝试探索 webpack plugin，揭秘它的工作原理，以及如何开发一个 plugin。 通过插件我们可以扩展 web…

本文以剖析webpack-dev-server源码，从零开始实现一个webpack热更新HMR，深入了解webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware的实现机制，彻底搞懂他们的原理，在面试过程中这…

上一篇讲述了如何理解tapable这个钩子机制，因为这个是webpack程序的灵魂。虽然钩子机制很灵活，而然却变成了我们读懂webpack道路上的阻碍。每当webpack运行起来的时候，我的心态都是佛系心态，祈祷中间不要出问题，不然找问题都要找半天，还不如不打包。尤其是load…