webpack 简介

Webpack 是一个静态模块打包工具，主要用于现代 JavaScript 应用程序的构建流程。它能将项目中的各种资源（如 JavaScript、CSS、图片、字体等）视为 “模块”，通过分析模块间的依赖关系，最终打包生成优化后的静态资源（如 bundle.js、样式文件等），供浏览器加载使用。

官方文档入口：webpack.js.org（概念见 Concepts）。下文以 webpack 5 为主线：默认内置 Asset Modules（asset/resource 等）处理静态资源，持久化缓存见进阶篇。

webpack 解决了什么问题？

简单来说，Webpack 就像一个 “加工厂”，接收项目中的各种资源（模块），处理它们的依赖关系，经过转换、优化后，输出浏览器可高效运行的静态文件，从而解决了前端工程化中的模块化、资源管理、兼容性和性能优化等核心问题。

五个核心概念

1. 入口（Entry）
   • 告诉 webpack 从哪个文件开始打包构建（默认 ./src/index.js），可配置多入口。
2. 输出（Output）
   • 指定打包产物输出目录与文件名规则（如 filename、chunkFilename、assetModuleFilename）。
3. Loader
   • 让 webpack 能够处理其他类型文件，转化为 js 可用模块
4. 插件（Plugin）
   • 用于扩展 Webpack 功能（如打包优化、环境变量注入等），例如 HtmlWebpackPlugin 自动生成 HTML 并引入打包后的资源。
5. 模式（Mode）
   • 指定构建模式/打包环境（development/production/none），不同模式会启用默认优化配置（如 production 模式自动开启代码压缩）。

五大核心功能

1. 模块打包
   • 将项目中分散的模块（如 JS 文件、CSS、图片等）根据依赖关系合并为少数几个打包文件（bundle），减少浏览器请求次数，提升加载效率。
2. 处理多种资源
   • 解析阶段以 JavaScript 与 JSON 为模块核心；样式、图片等需经 Loader 或 Webpack 5 内置的 Asset Modules（asset/resource、asset 等）接入打包图（旧版常用 file-loader / url-loader，新项目优先内置方案）。
3. 代码转换
   • 结合 babel-loader 等将 ESNext / TS / JSX 转译为 preset-env / targets 所指定的语法目标（未必是 ES5，取决于浏览器矩阵）。
4. 优化功能
   • 代码压缩（如 JS 压缩、CSS 压缩）
   • 代码分割（将代码拆分为多个 bundle，按需加载）
   • 树摇（Tree-shaking，移除未使用的代码）
   • 缓存优化（输出文件名使用 [contenthash] 等指纹，便于长期缓存与失效）
5. 开发辅助
   • 提供 webpack-dev-server 实现开发环境下的热更新（HMR），实时预览代码变化；支持 Source Map 便于调试。

---

本目录结构

编号	主题
02	Loader、Plugin 及二者区别
03	webpack.config 配置要点（entry / output / module / resolve / devServer / optimization）
04	Webpack 5 进阶：持久缓存、Code Splitting、Tree Shaking、Module Federation
05	常见问题与要点摘要