2、环境搭建与初始化：Node.js版本选择、npm/yarn/pnpm包管理器对比、初始化package.json、安装webpack与webpack-cli、创建基础目录结构
好，咱们正式开始动手了。
这一章说白了就是「搭台子」。台子搭不好，后面唱戏全得摔跟头。我见过太多新手甚至老手，一上来就 npm install，结果跑两天发现 Node 版本不对，或者包管理器选错了，整个项目推倒重来。嗯，咱们别走那条路。
2.1 Node.js 版本选择：别让版本坑了你
Node.js 是前端构建工具的基石。Webpack、Vite、Rollup 这些工具，本质上都是跑在 Node 环境里的 JavaScript 程序。所以 Node 版本选不对，后面全是泪。
我个人习惯：长期维护的项目用 LTS（长期支持）版本，新项目或尝鲜可以用 Current 版本。但千万别在生产环境用奇数版本（比如 13、15、17），那些是实验版，稳定性堪忧。
当前推荐版本（2024-2025）：
- 稳定首选：Node.js 20 LTS（推荐）
- 次选：Node.js 18 LTS（仍在维护）
- 新项目尝鲜：Node.js 22（Current）
为什么推荐 20？因为 Webpack 5 在 Node 18+ 上跑得最顺，而且很多新语法（比如原生 ESM 支持）在 20 里已经非常成熟了。
注意：Node.js 16 已经在 2023 年 9 月结束生命周期（EOL），不要再用了。我曾经接手过一个项目，package.json 里锁死了 Node 14，结果装个新插件都报错，折腾了两天才把环境升上来。血的教训。
如果你需要管理多个 Node 版本，我推荐用 nvm（Node Version Manager）。安装方式很简单：
# macOS / Linux
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Windows 用户用 nvm-windows
# 下载地址：https://github.com/coreybutler/nvm-windows/releases装好后，一行命令切换版本：
nvm install 20
nvm use 20
node -v # 确认版本2.2 npm / yarn / pnpm 包管理器对比：选哪个？
这个问题几乎每个前端人都纠结过。我直接说结论：
| 特性 | npm | yarn | pnpm |
|---|---|---|---|
| 安装速度 | 中等 | 较快 | 最快（硬链接 + 内容寻址） |
| 磁盘占用 | 高（每个项目重复下载） | 高（类似 npm） | 极低（全局共享存储） |
| 依赖隔离 | 扁平化（容易幽灵依赖） | 扁平化（类似 npm） | 严格隔离（更安全） |
| workspace 支持 | ✅ 原生支持 | ✅ 原生支持 | ✅ 最成熟 |
| 锁文件 | package-lock.json | yarn.lock | pnpm-lock.yaml |
我的建议：
- 新项目首选 pnpm。速度快、省磁盘、依赖隔离好。我在一个 monorepo 项目里用 pnpm，安装时间从 npm 的 3 分钟降到了 40 秒。
- 团队协作项目用 yarn。它的锁文件机制更成熟，团队里不容易出现「我本地能跑，你那就报错」的情况。
- 简单小项目用 npm 也行。毕竟 Node 自带，不用额外安装。
小技巧：如果你决定用 pnpm，记得先全局安装：npm install -g pnpm。然后后续所有命令都用 pnpm 替代 npm。
2.3 初始化 package.json
好，环境选好了，咱们开始初始化项目。
创建一个空目录，然后：
mkdir webpack-deep-dive
cd webpack-deep-dive
npm init -y # 或者 pnpm init -y加上 -y 参数会跳过交互式问答，直接生成一个默认的 package.json。我个人习惯先这样，后面再手动改。
生成的 package.json 大概长这样：
{
"name": "webpack-deep-dive",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {},
"keywords": [],
"author": "",
"license": "ISC"
}嗯，这里要改几处：
- description：写清楚项目用途，比如「前端构建工具深度配置指南」。
- private：设为 true，防止不小心发布到 npm 仓库。
- scripts：先留空，后面我们会加 build、dev 等命令。
改完之后：
{
"name": "webpack-deep-dive",
"version": "1.0.0",
"description": "前端构建工具深度配置指南",
"private": true,
"main": "index.js",
"scripts": {},
"keywords": [],
"author": "",
"license": "ISC"
}注意：千万别忘了加 "private": true。我曾经有一次手滑，把实验项目 publish 到了 npm 上，虽然马上 unpublish 了，但那个包名已经被占用了，后面想用都用不了。尴尬。
2.4 安装 webpack 与 webpack-cli
接下来安装核心依赖。记住，webpack 和 webpack-cli 是两个东西：
- webpack：核心打包引擎
- webpack-cli：命令行工具，让你能在终端里敲
webpack命令
安装命令：
# 用 npm
npm install --save-dev webpack webpack-cli
# 用 pnpm
pnpm add --save-dev webpack webpack-cli
# 用 yarn
yarn add --dev webpack webpack-cli为什么用 --save-dev？因为 webpack 是开发依赖，生产环境不需要。打包完成后，线上跑的是打包后的静态文件，跟 webpack 没关系了。
安装完成后，检查一下版本：
npx webpack --version如果看到类似 5.94.0 的输出，说明安装成功。
小提示：用 npx 而不是直接 webpack --version，是因为 npx 会自动从 node_modules/.bin 里找命令。如果你全局也装了 webpack，直接敲命令可能会调用全局版本，容易搞混。
2.5 创建基础目录结构
好，依赖装完了，咱们来搭目录结构。一个规范的 Webpack 项目，目录应该清晰、职责分明。
我个人习惯这样组织：
webpack-deep-dive/
├── src/ # 源代码目录
│ ├── index.js # 入口文件
│ ├── styles/ # 样式文件
│ │ └── main.css
│ └── utils/ # 工具函数
│ └── helper.js
├── public/ # 静态资源（不会被 webpack 处理）
│ └── index.html
├── dist/ # 打包输出目录（自动生成）
├── webpack.config.js # Webpack 配置文件
├── package.json
└── node_modules/ # 依赖目录（自动生成）创建命令：
mkdir src src/styles src/utils public
touch src/index.js src/styles/main.css src/utils/helper.js public/index.html然后在 src/index.js 里写点测试代码：
// src/index.js
console.log('Hello, Webpack!');在 public/index.html 里写个基础 HTML：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack 深度配置指南</title>
</head>
<body>
<div id="app"></div>
<!-- 注意：这里不要手动引入 JS 文件，webpack 会自动注入 -->
</body>
</html>核心原则：
src/放你手写的源码public/放不需要 webpack 处理的静态文件（比如 favicon、robots.txt）dist/是打包产物，不要手动修改，每次构建都会覆盖webpack.config.js是配置中心，后面所有章节都会围绕它展开
好，到这里，环境搭建就完成了。你可能会觉得「就这？也没干啥啊」。嗯，别急。台子搭好了，下一章咱们就开始写真正的 Webpack 配置了。到时候你会发现，前面这些准备工作，每一环都省不了。
下一章见。