⚡ Webpack 深度解析

1

Webpack入门 概念

Webpack是什么、为什么需要Webpack、核心概念（Entry、Output、Loader、Plugin、Mode）

2

环境搭建与初次打包 实操

Node.js安装、npm/yarn/pnpm初始化、安装Webpack与CLI、创建并运行第一个打包任务

3

核心概念-Entry 配置

单入口与多入口配置、entry的多种写法（字符串、数组、对象）、动态入口

4

核心概念-Output 输出

output.path与output.filename配置、占位符（[name][hash][chunkhash][contenthash]）、clean:true

5

核心概念-Loader（上） 原理

Loader的本质与工作原理、执行顺序（从右到左/从下到上）、配置module.rules

6

核心概念-Loader（下） 实战

babel-loader、css-loader、style-loader、file-loader、url-loader 静态资源处理

7

核心概念-Plugin 扩展

Plugin本质与工作原理、与Loader区别、HtmlWebpackPlugin、MiniCssExtractPlugin

8

核心概念-Mode 模式

development/production/none区别、内置优化（Tree Shaking、压缩、作用域提升）

9

开发服务器与热更新 HMR

webpack-dev-server配置、Hot Module Replacement原理、devServer.proxy跨域

10

Source Map 调试

Source Map作用、devtool选项（eval/source-map/cheap-module等）、最佳实践

11

处理CSS预处理器 样式

Sass/SCSS、Less、Stylus配置、PostCSS与autoprefixer

12

处理JavaScript高级语法 Babel

Babel配置详解、presets/plugins、@babel/preset-env、core-js polyfill策略

13

处理TypeScript 类型

ts-loader / babel-loader、tsconfig.json、类型检查与打包分离

14

处理图片与字体 资源

Asset Modules（resource/inline/source）、图片压缩（image-webpack-loader）

15

处理HTML模板 模板

HtmlWebpackPlugin高级配置、多页面应用、html-loader处理图片引用

16

代码分离（Code Splitting） 拆分

入口起点分离、SplitChunksPlugin、动态import()与懒加载

17

缓存策略 缓存

浏览器缓存原理、contenthash、runtime chunk提取、模块标识符优化

18

Tree Shaking 摇树

Tree Shaking原理、sideEffects、usedExports、concatenateModules

19

环境变量与模式 环境

DefinePlugin、cross-env、webpack-merge多环境配置

20

多页面应用（MPA） 多页

多入口与多HtmlWebpackPlugin、公共模块提取、路由资源管理

21

性能优化（构建速度） 提速

Loader的include/exclude、thread-loader、DLLPlugin、Persistent Cache

22

性能优化（打包体积） 瘦身

TerserPlugin、CssMinimizerPlugin、Gzip压缩、webpack-bundle-analyzer

23

Webpack与框架（React） React

JSX支持、React Refresh热更新、CRA配置解析

24

Webpack与框架（Vue） Vue

vue-loader、Vue SFC、Vue CLI配置解析、Vite对比

25

Webpack与Node.js Node

target:'node'、处理内置模块（crypto/fs）、Node与浏览器差异

26

自定义Loader 进阶

Loader编写规范（pitch/normal）、Loader上下文、实战markdown-loader

27

自定义Plugin 进阶

Plugin编写规范（compiler/compilation钩子）、Tapable、版权声明Plugin

28

Webpack 5新特性 v5

持久化缓存、模块联邦、Asset Modules、嵌套node_modules处理

29

模块联邦（Module Federation）深入 微前端

微前端基础、exposes/remotes、shared依赖、实战微前端Demo

30

Webpack生态与未来 展望

Vite/Rollup/ESBuild对比、Webpack 6展望、迁移策略