webpack 体系 | 青训营

基础概念和核心概念：

• 什么是 Webpack，以及它的作用和优势
• 了解入口（Entry）和输出（Output）
• Webpack 的模块化系统和模块解析
• 理解 Chunk 和 Bundle 的概念
• 代码分割（Code Splitting）和懒加载（Lazy Loading）

配置与环境：

• 创建 Webpack 配置文件（webpack.config.js）
• 多环境构建和配置管理
• 使用环境变量传递配置信息
• 配置不同环境下的资源路径
• 配置模块解析的规则和别名

加载器（Loaders）：

• 什么是加载器，为什么需要它们
• 常用加载器：Babel Loader、CSS Loader、File Loader 等
• 使用加载器转换不同类型的文件
• 创建自定义加载器来处理特定任务
• 配置加载器的规则和选项

插件（Plugins）：

• 什么是插件，以及为什么需要它们
• 常用插件：HtmlWebpackPlugin、MiniCssExtractPlugin、CleanWebpackPlugin 等
• 使用插件执行构建任务：压缩、生成 HTML、拷贝文件等
• 创建自定义插件来满足特定需求
• 配置插件的选项和使用方法

优化与性能：

• 优化构建速度和打包体积
• 使用 Tree Shaking 剔除未使用的代码
• 使用代码分割优化应用性能
• 使用懒加载和预加载提升用户体验
• 压缩代码和资源以减小文件大小
• 缓存策略和文件指纹管理

热模块替换（HMR）：

• 什么是热模块替换，为什么有用
• 配置 Webpack Dev Server 实现 HMR
• 在开发环境下实现模块级别的热替换
• 处理样式和状态的变化

工程化实践：

• 使用版本控制管理 Webpack 配置和源代码
• 构建自动化和持续集成（CI/CD）
• 使用工程化工具来简化构建流程
• 了解 Webpack 与其他工具的集成，如 Babel、ESLint 等
• 代码规范和最佳实践

进阶主题：

• 使用 Webpack 的高级特性，如 Scope Hoisting、动态导入等
• 使用 Webpack 进行 SSR（服务器端渲染）
• 高级优化技巧，如代码分析、延迟加载等
• Webpack 5 新功能和变化
• 处理不同类型资源的构建流程