一、Webpack 核心概念
Webpack 本质是一个 模块打包器（module bundler） ，核心思想就一句话：
👉 把一切资源当成模块，然后构建依赖图，打包输出
1. Entry（入口）
- 项目从哪里开始打包
entry: './src/index.js'
👉 相当于依赖分析的起点
2. Output（输出）
- 打包后的文件输出到哪里
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
3. Module（模块）
Webpack 默认只认识 JS、JSON
👉 其他资源（CSS、图片、TS）都需要处理
4. Loader（加载器）
👉 让 Webpack 能处理非 JS 文件
本质：文件转换器
例如：
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
}
常见 loader：
- babel-loader（ES6 → ES5）
- ts-loader（TS → JS）
- css-loader / style-loader
- file-loader / url-loader（已被 asset modules 替代）
5. Plugin（插件）
👉 扩展 Webpack 功能（更强大）
例如：
plugins: [
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin()
]
常见用途：
- 生成 HTML
- 压缩代码
- 提取 CSS
- 环境变量注入
6. Mode（模式）
mode: 'development' | 'production'
区别：
- development：快，不压缩
- production：慢，但优化好
7. Chunk（代码块）
👉 打包过程中生成的代码块
来源：
- 入口
- 动态 import
- splitChunks
8. Bundle（最终文件）
👉 浏览器真正加载的文件
9. Dependency Graph（依赖图）
👉 Webpack 最核心机制
index.js → a.js → b.js → c.css
Webpack 会递归分析所有依赖 → 构建图 → 打包
二、常见优化手段（重点🔥）
优化可以分为三类：
1️⃣ 构建速度优化（开发体验）
✅ 缩小打包范围
include: path.resolve(__dirname, 'src')
exclude: /node_modules/
✅ 使用缓存
cache: {
type: 'filesystem'
}
✅ 多进程打包（thread-loader）
use: ['thread-loader', 'babel-loader']
✅ 使用更快的工具替代
- babel → swc / esbuild
- terser → esbuild压缩
✅ 合理使用 sourceMap
devtool: 'eval-cheap-module-source-map'
✅ 开发环境用 HMR（热更新）
devServer: {
hot: true
}
2️⃣ 打包体积优化（上线性能）
✅ Tree Shaking（摇树优化）
👉 删除无用代码（ES Module 必须）
usedExports: true
前提：
- 使用 ES Module（import/export）
- package.json 设置：
"sideEffects": false
✅ 代码分割（Code Splitting）
动态加载
import('./module')
配置拆包
optimization: {
splitChunks: {
chunks: 'all'
}
}
👉 拆分：
- vendor（第三方库）
- 公共代码
✅ 压缩代码
默认 production 已开启：
- JS：Terser
- CSS：css-minimizer-webpack-plugin
✅ 提取 CSS
new MiniCssExtractPlugin()
👉 避免 JS 里插入 style，提高加载性能
✅ 图片优化
- 使用
asset/resource - 小图转 base64
- 图片压缩（image-minimizer）
✅ Gzip / Brotli 压缩
new CompressionPlugin()
3️⃣ 运行时性能优化
✅ 懒加载（Lazy Load）
const Comp = React.lazy(() => import('./Comp'))
✅ CDN 加速
externals: {
react: 'React'
}
👉 不打包 React，用 CDN
✅ 缓存优化（关键🔥）
文件名加 hash
filename: '[name].[contenthash].js'
👉 浏览器长期缓存
✅ runtime 分离
optimization: {
runtimeChunk: 'single'
}
三、面试总结（可以直接背）
👉 核心概念一句话：
Webpack 是一个基于依赖图的模块打包工具，通过 Entry 构建依赖关系，使用 Loader 处理模块，Plugin 扩展功能，最终输出 Bundle。
👉 优化三板斧：
-
构建优化
- 缓存、多线程、缩小范围
-
体积优化
- Tree Shaking、代码分割、压缩
-
运行优化
- 懒加载、CDN、缓存
