Webpack 快速开始
本教程将带你从零开始，搭建第一个 Webpack 项目。完成本教程后，你将理解 Webpack 的基本用法，并能够运行你的第一个打包项目。
预计时间：15-20 分钟
📋 学习目标
完成本教程后，你将能够：
- ✅ 理解 Webpack 是什么以及它的作用
- ✅ 安装和配置 Webpack
- ✅ 创建第一个 Webpack 项目
- ✅ 运行开发服务器和构建项目
- ✅ 理解基本的打包流程
什么是 Webpack？
Webpack 是一个模块打包器（Module Bundler），它的主要作用是：
- 分析依赖：从入口文件开始，分析所有模块的依赖关系
- 转换资源：将各种资源（JS、CSS、图片等）转换为浏览器可识别的格式
- 打包输出：将所有模块打包成一个或多个文件
为什么需要 Webpack？
在现代前端开发中，我们使用：
- ES6+ 语法
- 模块化（import/export）
- CSS 预处理器（Sass、Less）
- TypeScript
- 各种框架和库
但浏览器不能直接理解这些，Webpack 帮助我们：
- 将 ES6+ 转换为 ES5
- 处理模块依赖
- 优化和压缩代码
- 提供开发服务器
第一步：环境准备
检查 Node.js
确保已安装 Node.js（建议 14+ 版本）：
node -v
# 应该显示版本号，如 v16.14.0如果没有安装，请访问 Node.js 官网 下载安装。
第二步：创建项目
1. 创建项目目录
# 创建项目文件夹
mkdir my-webpack-project
cd my-webpack-project2. 初始化 package.json
npm init -y这会创建一个 package.json 文件，用于管理项目依赖。
3. 安装 Webpack
# 安装 Webpack 核心包（开发依赖）
npm install --save-dev webpack webpack-cli说明：
webpack：Webpack 核心包webpack-cli：Webpack 命令行工具--save-dev：作为开发依赖安装（生产环境不需要）
4. 查看安装结果
安装完成后，package.json 会包含：
{
"devDependencies": {
"webpack": "^5.x.x",
"webpack-cli": "^5.x.x"
}
}第三步：创建项目结构
创建以下目录结构：
my-webpack-project/
├── src/ # 源代码目录
│ └── index.js # 入口文件
├── dist/ # 输出目录（Webpack 自动生成）
├── webpack.config.js # Webpack 配置文件
└── package.json
创建源文件
src/index.js（入口文件）
// 这是我们的入口文件
console.log('Hello Webpack!')
// 创建一个简单的函数
function greet(name) {
return `Hello, ${name}!`
}
// 使用函数
const message = greet('Webpack')
console.log(message)第四步：创建 Webpack 配置
创建 webpack.config.js 文件：
const path = require('path')
module.exports = {
// 入口文件：Webpack 从这里开始分析依赖
entry: './src/index.js',
// 输出配置
output: {
// 输出目录（必须是绝对路径）
path: path.resolve(__dirname, 'dist'),
// 输出文件名
filename: 'bundle.js'
},
// 模式：development（开发）或 production（生产）
mode: 'development'
}配置说明：
entry：告诉 Webpack 从哪里开始打包output.path：打包后的文件输出到哪里output.filename：打包后的文件名mode：开发模式，代码不会被压缩
第五步：配置 npm 脚本
在 package.json 中添加构建脚本：
{
"scripts": {
"build": "webpack",
"dev": "webpack --watch"
}
}脚本说明：
build：执行一次打包dev：监听文件变化，自动重新打包
第六步：运行第一个打包
执行打包
npm run build查看结果
打包完成后，你会看到：
asset bundle.js 1.2 KiB [emitted] (name: main)
./src/index.js 123 bytes [built] [code generated]
同时，dist 目录下会生成 bundle.js 文件。
查看打包结果
打开 dist/bundle.js，你会看到 Webpack 已经：
- 将你的代码打包
- 添加了一些 Webpack 的运行时代码
- 代码被包装在模块系统中
第七步：测试打包结果
创建 HTML 文件
创建 dist/index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpack Project</title>
</head>
<body>
<h1>Webpack 项目</h1>
<!-- 引入打包后的 JS 文件 -->
<script src="bundle.js"></script>
</body>
</html>在浏览器中打开
用浏览器打开 dist/index.html，打开开发者工具（F12），你应该能在控制台看到：
Hello Webpack!
Hello, Webpack!
恭喜！ 你的第一个 Webpack 项目运行成功了！🎉
第八步：使用开发服务器（可选）
手动创建 HTML 文件很麻烦，我们可以使用 Webpack 的开发服务器。
安装 webpack-dev-server
npm install --save-dev webpack-dev-server更新配置
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development',
// 开发服务器配置
devServer: {
static: {
directory: path.join(__dirname, 'dist')
},
port: 3000,
open: true, // 自动打开浏览器
hot: true // 热更新
}
}更新 package.json
{
"scripts": {
"build": "webpack",
"dev": "webpack serve",
"watch": "webpack --watch"
}
}启动开发服务器
npm run dev浏览器会自动打开 http://localhost:3000，并且当你修改代码时，页面会自动刷新。
常见问题
1. 找不到 webpack 命令
问题：执行 webpack 时报错 “command not found”
解决：使用 npx webpack 或 npm run build
2. 打包后文件很大
原因：开发模式下，Webpack 会包含调试信息
解决：使用生产模式 mode: 'production'，代码会被压缩
3. 修改代码后没有变化
解决：
- 使用
npm run dev启动开发服务器（自动刷新） - 或使用
npm run watch监听文件变化
下一步
现在你已经完成了第一个 Webpack 项目！接下来可以学习：
- 核心概念 - 理解 Entry、Output、Loader、Plugin 等核心概念
- 基础配置详解 - 深入学习配置选项
- 实战项目：从零搭建 React 项目 - 搭建真实的 React 项目
总结
在本教程中，你学会了：
- ✅ Webpack 是什么以及为什么需要它
- ✅ 如何安装和配置 Webpack
- ✅ 如何创建和运行第一个 Webpack 项目
- ✅ 如何使用开发服务器
关键点：
- Webpack 从
entry开始分析依赖 - 打包结果输出到
output.path - 使用
mode区分开发和生产环境 - 开发服务器提供热更新功能
继续学习，你会掌握更多 Webpack 的强大功能！