Webpack 基础

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

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

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

使用 HappyPack HappyPack 能够将耗时的文件加载（Loader）操作拆散到多个子进程中并发执行，子进程执行完毕后再将结果合并回传到 Webpack 进程，从而提升构建性能。不过，Ha

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

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

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

基本配置 使用test+type+generator形式，匹配各种图片模式，指定解析资源类型，再规定输出文件名格式以及输出文件夹。一般来说，使用这套配置可以解决webpack项目下所有的图片引入问题。

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

Module Federation Module Federation 是这篇文章的主角，它是 Webpack 5 新引入的一种远程模块动态加载、运行技术。MF 允许我们将原本单个巨大应用按我们理想的

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

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

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

安装依赖 配置文件 在项目根目录添加 .eslintrc配置文件 在 webpack.config.js中设置好配置 其他 Babel 预设规则集 —— Preset，这种设计能按需将一系列复杂、数量

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

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

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