Webpack 知识目录
1. Webpack 基础
1.1 Webpack 简介
- 什么是 Webpack？
- Webpack 的核心概念
1.2 安装与配置
- 安装 Webpack
- 配置文件：
webpack.config.js
1.3 入口与出口 entry：指定入口文件output：指定输出文件
1.4 Loader 与 Plugin- Loader 的作用与使用
- Plugin 的作用与使用
2. Webpack 核心概念
2.1 模块与依赖
- 模块化开发
- 依赖图（Dependency Graph）
2.2 模式（Mode） development模式production模式
2.3 代码分割（Code Splitting）- 手动分割
- 动态导入（Dynamic Imports）
2.4 热模块替换（HMR） - 启用 HMR
- 配置 HMR
3. Loader
3.1 常用 Loader
babel-loader：编译 ES6+ 代码css-loader与style-loader：处理 CSSfile-loader与url-loader：处理文件sass-loader：编译 Sass/SCSS
3.2 自定义 Loader- Loader 的工作原理
- 编写自定义 Loader
4. Plugin
4.1 常用 Plugin
HtmlWebpackPlugin：生成 HTML 文件CleanWebpackPlugin：清理构建目录MiniCssExtractPlugin：提取 CSS 文件DefinePlugin：定义全局变量
4.2 自定义 Plugin- Plugin 的工作原理
- 编写自定义 Plugin
5. 优化与性能
5.1 构建速度优化
- 使用
cache缓存 - 多线程构建：
thread-loader
5.2 输出文件优化 - 代码压缩：
TerserPlugin - CSS 压缩：
CssMinimizerPlugin
5.3 Tree Shaking - 移除未使用代码
5.4 懒加载与预加载 - 懒加载（Lazy Loading）
- 预加载（Preloading）
6. 高级配置
6.1 多页面应用（MPA）
- 配置多入口
- 使用
HtmlWebpackPlugin生成多个 HTML 文件
6.2 环境变量 - 使用
dotenv加载环境变量 - 区分开发与生产环境
6.3 代理与跨域 - 配置开发服务器代理
6.4 自定义配置 - 根据环境动态生成配置
7. Webpack 生态
7.1 Webpack Dev Server
- 启动开发服务器
- 配置代理与 HMR
7.2 Webpack Bundle Analyzer - 分析构建结果
7.3 Webpack Merge - 合并配置文件
8. Webpack 5 新特性
8.1 模块联邦（Module Federation）
- 微前端架构
8.2 持久化缓存 - 提升构建速度
8.3 资源模块（Asset Modules） - 替代
file-loader与url-loader
8.4 其他改进 - Tree Shaking 增强
- 更好的长期缓存
9. 实战项目
9.1 配置 React 项目
- 支持 JSX
- 配置 HMR
9.2 配置 Vue 项目 - 支持 Vue 单文件组件
9.3 配置 TypeScript 项目 - 支持 TypeScript
9.4 配置多页面应用
10. 学习资源
10.1 官方文档
- Webpack 官方文档
10.2 书籍 - 《深入浅出 Webpack》
10.3 视频教程 - Udemy：Webpack 5 完全指南
- Frontend Masters：Webpack 深度解析