📦 Webpack 深度配置
🎒 友好 · 30章完整进阶
⚡ 30节课 · 从入门到企业实战
01
Webpack入门
Webpack是什么
为什么需要
核心概念
与Vite对比
02
环境搭建与初体验
Node.js安装
npm/yarn/pnpm
第一个项目
webpack-cli
打包产物
03
核心配置之Entry
单/多入口
动态入口
context选项
依赖图与chunk
04
核心配置之Output
path/filename
publicPath
clean清理
多入口输出
library
05
Loader机制
Loader是什么
执行顺序
常用分类
自定义思路
options/query
06
样式处理（上）
css-loader
style-loader
less/sass
CSS Modules
MiniCssExtract
07
样式处理（下）
PostCSS+autoprefixer
CssMinimizer
内联/临界CSS
Tailwind集成
08
资源模块（Asset）
asset/resource
asset/inline
asset/source
通用类型
图片压缩
09
Babel与JS编译
Babel是什么
@babel/core/preset-env
browserslist
polyfill/runtime
10
TypeScript支持
ts-loader / babel
tsconfig.json
类型检查
声明文件
11
Plugin机制
Plugin是什么
与Loader区别
常用Plugin
compiler/compilation
自定义入门
12
开发服务器DevServer
webpack-dev-server
HMR
liveReload
proxy代理
historyApiFallback
13
Source Map
原理
devtool选项
生产策略
安全注意
14
代码分割
入口点分割
SplitChunksPlugin
动态import
prefetch/preload
chunk命名
15
缓存策略
浏览器缓存原理
contenthash/chunkhash
runtime chunk
moduleIds
长效缓存
16
环境变量与Mode
mode配置
DefinePlugin
.env文件
cross-env
17
Tree Shaking
原理
sideEffects
usedExports
CSS Tree Shaking
优化建议
18
性能优化（上）
构建速度
thread-loader
cache-loader
resolve优化
DLL/HardSource
19
性能优化（下）
打包体积压缩
Gzip/CDN
image-webpack
bundle-analyzer
speed-measure
20
多页面MPA配置
多入口配置
HtmlWebpackPlugin
公共代码提取
路由导航
21
微前端与Module Federation
MF概念
exposes/remotes
shared依赖
隔离通信
22
Webpack与React
JSX编译
React HMR
Router懒加载
Ant Design按需
DevTools
23
Webpack与Vue
vue-loader
Router懒加载
Vuex
Element Plus按需
DevTools
24
Webpack与Node.js
打包Node应用
target:node
externals
内置模块
SSR配置
25
自定义Loader实战
Loader结构
loader-utils
schema-utils
异步Loader
缓存/pitch
26
自定义Plugin实战
Plugin结构
Tapable钩子
compiler/compilation
文件写入
发布使用
27
Webpack 5新特性
持久化缓存
模块联邦
Asset Modules
polyfill移除
Top-Level Await
28
迁移与升级
Webpack4→5
配置变更
插件兼容
性能对比
常见问题
29
企业级配置模板
通用抽象
环境分离
monorepo集成
CI/CD
团队规范
30
实战项目
React+TS
开发/生产环境
ESLint+Prettier
Jest测试
性能部署