在当前的微前端实现中，我们需要通过一系列的技巧去实现。正如上图所示，微前端的公共依赖加载目前并没有非常好的实现方案。然后，Webpack 5中的模块联邦将会改变这一现状。 模块联邦可以去依赖一个远程模块，这个依赖会在运行时生效，并不影响编译时。因此，这个远程依赖的模块就可以是一…

Module Federation使 JavaScript 应用可以动态运行另一个 JavaScript 应用中的代码，同时可以共享依赖。 如何理解上面这句话呢，我们可以从实际场景出发来看待这项技术。在我们日常开发中，经常能遇到需要复用一段代码逻辑的场景，一般我们可以从以下几种…

虽然webpack5已经发布了一段时间了，但一直都没有研究过，最近正好在做微前端相关的调研，恰好看到了webpack5的模块联邦与微前端的相关方案，便想着探究下模块联邦的相关源码。（ps：关于微前端，稍微说一句，个人觉得在选取微前端方案的时候可有结合现有资源以及形态进行相关取舍…

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

可以解决跨项目的相互依赖，假设目前有两个项目 app1 和 app2，app1 想使用 app2 项目里的某个组件比如 src/components/Button.js。我们可能会将 components 拆成公共的组件库分别在 app1、app2 里引入，但是维护和更新组件库…

主流框架中，不论是React还是Vue，都是使用Webpack进行资源的打包，这篇文章我们试着分析打包后的bundle文件来了解下其是如何进行静态和动态导入的。 modules​：缓存 ​module​ 代码块，每个 ​module​ 有一个 ​id​，开发环境默认以 ​mod…

在我刚学会配置webpack的时候，用webpack打包出来的文件也曾想去读一读看一看，但是自己内心误以为会很难懂，所以直接放弃了，如今在回过头，其实并不难。用我的一句话总结就是：使用nodejs的fs模块来读取文件内容并创造出一个‘路径-代码块’的map，然后写进一个js文件…

对于前端同学来说webpack应该一点不陌生，现在应该大部分的工程都在使用webpack来进行构建。 现在很多的框架都已经提供相应的脚手架命令行工具，直接执行之后就会生成对应的模板项目。 但是我们仍然需要知道webpack的工作原理到底是什么？知道之后也方便我们对现有的项目进行…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…