Skip to main content

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：处理 CSS
  • file-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 深度解析
0%