2-2 Webpack核心概念及配置
学习资源
Webpack 有两个重要的官方文档站点：
- 英文官网：webpack.js.org —— 一手资料，更新及时
- 中文网：webpack.js.com —— 翻译内容相对滞后，适合结合英文站对照阅读
建议学习方式：先阅读英文官网的"概念"（Concepts）页面，理解核心思想后再结合中文文档深入实践。遇到不熟悉的英文术语，可以使用浏览器翻译插件或拖拽翻译工具辅助阅读。
概念与配置的对应关系
Webpack 官方推荐从"概念"入手而非直接看 API 配置指南，这说明理论学习应该先行——先掌握核心思想，后续学习才有指导方针。
打开 Webpack 官网的"配置"（Configuration）页面，可以逐一将概念与配置项对应：
| 核心概念 | 配置文件中的字段 | 说明 |
|---|---|---|
| 入口 Entry | entry | Webpack 构建的起点 |
| 输出 Output | output | 打包产物的输出位置和命名 |
| 加载器 Loader | module.rules | 处理非 JS 文件的转换规则 |
| 插件 Plugin | plugins | 干预整个构建流程的高级功能 |
| 模式 Mode | mode | development / production / none |
此外还有两个辅助概念：
- 浏览器兼容性：对应配置中的
target和output.library，控制打包产物的运行环境 - 环境：Webpack 5 要求 Node.js 10.13 以上版本
Entry（入口）
Entry 是 Webpack 构建依赖图的起点。Webpack 从入口文件出发，递归解析所有关联的模块，安排不同的 Loader 处理各类文件。
三种写法
// 1. 字符串 —— 单入口
module.exports = {
entry: './src/index.js',
};
// 2. 数组 —— 多入口合并为一个 chunk
module.exports = {
entry: ['./src/a.js', './src/b.js'],
};
// 3. 对象 —— 多入口，输出多个 chunk
module.exports = {
entry: {
app: './src/app.js',
vendor: './src/vendor.js',
},
};
javascript
高级配置：runtime 和 dependOn
当多个入口共享依赖时，可以使用 dependOn 和 runtime 来优化打包：
module.exports = {
entry: {
react: { import: 'react', dependOn: 'vendors' },
vendor: { import: 'moment', dependOn: 'vendors' },
vendors: { import: ['react-dom', 'lodash'] },
testApp: {
import: './src/testApp.js',
dependOn: ['react', 'vendor'],
runtime: 'runtime',
},
},
};
javascript
dependOn：当前入口依赖的其他入口，打包时不会重复包含这些依赖runtime：创建一个运行时 chunk，存放模块加载逻辑（Webpack 5.43.0 后可设为false避免创建）
Output（输出）
Output 告诉 Webpack 在哪里输出打包产物以及如何命名。
基础配置
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'), // 输出目录
filename: '[name].bundle.js', // 输出文件名
publicPath: '/', // 公共路径（CDN 部署时常用）
},
};
javascript
如果不配置 Output，Webpack 会使用默认值：输出到 dist 目录，文件名为 main.js。
输出为库文件
当需要将项目打包成一个可供其他项目使用的库时，配置 output.library：
module.exports = {
output: {
library: {
name: 'MyLibrary', // 库的全局变量名
type: 'umd', // 支持的模块规范
},
},
};
javascript
type 支持的格式几乎涵盖了前端所有规范：CommonJS、AMD、UMD、ES Module、global（window/self）、module 等。这从一个侧面反映了 Webpack 生态的丰富程度。
Loader（加载器）
Webpack 开箱只能理解 JavaScript 和 JSON 文件。Loader 让 Webpack 能够处理其他类型的资源文件（如 .vue、.scss、.png、.svg 等）。
配置结构
Loader 在 module.rules 中配置，核心属性只有两个：
module.exports = {
module: {
rules: [
{
test: /\.ts$/, // 哪些文件需要处理
use: 'ts-loader', // 使用哪个 Loader
include: path.resolve(__dirname, 'src'), // 最佳实践：用 include 限定范围
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'], // 多个 Loader
},
],
},
};
javascript
寻找合适的 Loader
三种方式找到你需要的 Loader：
- NPM 搜索：直接在 npmjs.com 搜索
webpack xxx loader（如webpack svg loader） - awesome-webpack：GitHub 上的 awesome 列表收录了大量高质量 Loader
- Webpack 官网 Loader 列表：官方维护的 Loader 分类索引
Loader 执行顺序
这是一个高频面试点：Loader 的执行顺序是从右往左、从下往上。
use: ['style-loader', 'css-loader', 'sass-loader']
// 执行顺序：sass-loader → css-loader → style-loader
javascript
- 如果是数组形式（只有 Loader 名称），从最右边开始执行
- 如果是对象形式（带 options），同样从最后一个 Loader 开始往前执行
这个顺序的设计原因是最右边的 Loader 产出结果给左边的 Loader 使用，形成处理链条：源文件经过第一个 Loader 转换后，输出作为下一个 Loader 的输入。
最佳实践建议使用 include 而非 exclude 来限定 Loader 的处理范围，且推荐使用绝对路径。
Plugin（插件）
Plugin 是 Webpack 的高阶应用，它可以干预整个构建流程，执行比 Loader 更广泛的任务。
Loader vs Plugin 的区别
| 维度 | Loader | Plugin |
|---|---|---|
| 作用范围 | 针对特定类型的文件 | 针对整个构建流程 |
| 处理内容 | 文件内容转换（如 SCSS → CSS） | 打包优化、资源管理、环境变量注入等 |
| 配置位置 | module.rules | 顶层 plugins 数组 |
常用内置插件
Webpack 官方提供了丰富的内置插件：
| 插件 | 用途 |
|---|---|
BannerPlugin | 在打包产物头部添加注释 |
CommonsChunkPlugin | 提取公共模块（Webpack 4 后改用 optimization.splitChunks） |
DefinePlugin | 注入全局环境变量 |
HtmlWebpackPlugin | 自动生成 HTML 并注入打包产物 |
MiniCssExtractPlugin | 将 CSS 提取为独立文件 |
TerserPlugin | 压缩和混淆 JavaScript |
使用示例
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 模板文件
}),
],
};
javascript
Mode（模式）
Mode 配置项决定了 Webpack 使用哪套预设的优化策略：
| 模式 | 值 | 说明 |
|---|---|---|
| 开发模式 | development | 启用开发工具、不压缩代码 |
| 生产模式 | production | 启用压缩、Tree Shaking 等优化 |
| 无预设 | none | 不使用任何默认优化 |
不同模式会自动启用不同的插件和环境变量。例如 production 模式会自动启用 TerserPlugin、DefinePlugin({ 'process.env.NODE_ENV': '"production"' }) 等配置。
模式的设计初衷是解决 Webpack 配置项过多的问题——通过预设减少手动配置的工作量，同时保留了通过 none 模式完全自定义的能力。
学习路径总结
掌握以上五大核心概念后，可以继续扩展学习：
- DevTools：source map 配置，调试打包后的代码
- DevServer：本地开发服务器，支持 HMR 热更新
- 缓存：Webpack 5 的持久化缓存，加速二次构建
- 代码分割：
optimization.splitChunks配置，优化加载性能
这些扩展内容都可以沿用"概念 + 配置文件对照"的学习方法，循序渐进地掌握。
↑