XMX303

动态加载，减少首屏资源加载量 Webpack 默认会将同一个 Entry 下的所有模块全部打包成一个产物文件 —— 包括那些与页面关键渲染路径无关的代码，从而影响首屏渲染性...

使用 TerserWebpackPlugin 压缩 JS Terser 是当下 最为流行 的 ES6 代码压缩工具之一，支持 Dead-Code Eliminate、删除注...

深入理解分包产物之一 Chunk Chunk 是 Webpack 用于组织、管理、优化最终产物，在构建流程进入生成（Seal）阶段后： Webpack 根据entry配置创...

使用 HappyPack HappyPack 能够将耗时的文件加载（Loader）操作拆散到多个子进程中并发执行，子进程执行完毕后再将结果合并回传到 Webpack 进程，...

持久化缓存 算得上是 Webpack 5 最令人振奋的特性之一，它能够将首次构建的过程与结果数据持久化保存到本地文件系统，在下次执行构建时跳过解析、链接、编译等一系列非常消...

核心流程 Webpack 最最核心的功能，一是使用适当 Loader 将任意类型文件转译成 JavaScript 代码，二是将这些经过 Loader 处理的文件资源合并、打...

Webpack 的配置结构 Webpack 支持以数组、函数方式配置运行参数，以适配不同场景应用需求，它们之间大致上区别： 单个配置对象：比较常用的一种方式，逻辑简单，适合...

基本配置 使用test+type+generator形式，匹配各种图片模式，指定解析资源类型，再规定输出文件名格式以及输出文件夹。一般来说，使用这套配置可以解决webpac...

毋庸置疑，对前端开发者而言，当下正是一个日升月恒的美好时代！在久远的过去，Web 页面的开发技术链条非常原始而粗糙，那时候的 JavaScript 更多用来点缀 Web 页...

Module Federation Module Federation 是这篇文章的主角，它是 Webpack 5 新引入的一种远程模块动态加载、运行技术。MF 允许我们将...

传统 Web 开发强调样式、结构、逻辑分离，以此降低技术复杂度。但 React 认为渲染逻辑本质上与其它 UI 逻辑存在内在耦合关系，所以提倡将结构、逻辑与样式共同存放在同...

传统 Web 开发通常会强调将页面的 HTML、CSS、JavaScript 代码分开用不同文件承载，这种思维本质上是将页面层级的结构、样式、逻辑分离成不同关注点；而现代 ...

原生 Webpack 并不能识别 CSS 语法，通常需要使用以下 loader 来处理： css-loader：该 Loader 会将 CSS 等价翻译为形如 module...

安装依赖 配置文件 在项目根目录添加 .eslintrc配置文件 在 webpack.config.js中设置好配置 其他 Babel 预设规则集 —— Preset，这种...

输入： 模块处理： resolve【配置模块路径解析规则】： alias：创建两个别名，一个常规项目都有的@，另一个是 vue$，值得注意的是这里的 $ 是正则表达式的通配...

Webpack 原生提供了上百种配置，我们想理解各项配置的作用，需要先了解一下 Webpack 的编译打包全流程，知道我们的代码是如何一步步变成最后的 chunk 包。 W...

在前端刚诞生时，我们只能使用原生 JavaScript、CSS、HTML 方式编写页面代码，开发与生产环境代码基本一致，开发与运行效率都非常低；其次，页面的图片、代码、CS...

本文我们讲解在接下来的「封装」阶段，如何根据 ModuleGraph 内容组织 Chunk，并进一步构建出 ChunkGroup、ChunkGraph 依赖关系对象的主流程...

对象（Object）可以通过两种形式定义：声明形式和构造形式 一般来说我们都是使用声明形式来创建 Object，使用构造形式来给 Object 补充后续变量。 Object...