最近webpack5正式发布，其中推出了一个非常令人激动的新功能，即今日的主角——Module Federation（以下简称为mf），下面将通过三个方面（what，how，where）来跟大家一起探索这个功能的奥秘。 一. 是什么 结合以上，不难看出，mf实际想要做的事，便是…

对于Webpack有一句话Everything is a plugin，Webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable。Tapable有点类似nodejs的events库，核心原理也是依赖与发布订阅模式。webp…

首先我们先回顾一下webpack常见配置，因为后面会用到，所以简单介绍一下。 这里面我们重点关注 module和plugins属性，因为今天的重点是编写loader和plugin，需要配置这两个属性。 通过逐层识别模块依赖。（Commonjs、amd或者es6的import，w…

webpack中 loader 是一个非常重要的概念，loader 可以简单的理解成一个文件处理器，webpack使用 loader 来处理各类文件，比如 .scss转成成 css文件, 小图片转换成base64图片。 本质上讲，loader 只是导出为函数的 JavaScri…

Webpack 通过 Plugin 机制让其更加灵活，以适应各种应用场景。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。 Webpack 启动后，在读取配置的过程中会先执行…

最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。 1. 目标分析 2. 准备工作 首先我们 vue init w…