2、环境搭建与初次打包：Node.js安装、npm/yarn/pnpm初始化、安装Webpack与Webpack CLI、创建并运行第一个打包任务

好，咱们正式开始动手了。

这一章，说白了就是「把地基打牢」。很多新手一上来就急着写配置，结果环境没搭好，报错一堆，心态直接崩了。我见过太多这样的案例了——包括我自己刚入行时也踩过这个坑。

所以，咱们一步一步来。先把 Node.js 装好，再选一个包管理器，然后装上 Webpack，最后跑通第一个打包任务。走完这一章，你就能看到 Webpack 到底在干什么了。

2.1 安装 Node.js：Webpack 的「发动机」

Webpack 是用 Node.js 写的。没有 Node.js，它根本跑不起来。所以第一步，装 Node.js。

去哪下载？

• 官网：https://nodejs.org
• 建议下载 LTS 版本（长期支持版），稳定，坑少。
• 别追最新版。最新版往往有兼容性问题，我在项目中吃过这个亏。

装完怎么验证？

打开终端（Windows 用 cmd 或 PowerShell，Mac/Linux 用 Terminal），输入：

node -v
npm -v

如果能看到版本号，比如 v18.16.0 和 9.5.1，那就说明装好了。

2.2 包管理器三选一：npm、yarn、pnpm

Node.js 装好之后，自带了一个包管理器叫 npm。但市面上还有 yarn 和 pnpm。到底用哪个？

我直接给你结论：

工具	特点	推荐场景
npm	自带，无需额外安装，生态最成熟	新手入门、小项目
yarn	速度快，有缓存机制，锁定文件更可靠	团队协作、中大型项目
pnpm	磁盘空间省，安装极快，严格依赖管理	多项目 monorepo、追求性能

我个人现在主力用 pnpm。为什么？因为它的「硬链接」机制能节省大量磁盘空间。我之前维护一个 monorepo，十几个子项目，用 npm 装完占了 3 个 G，换成 pnpm 后只用了 800 多 M。你想想看，这差距有多大。

不过这一章，咱们先用 npm 演示，因为它是默认选项，最通用。你学会了 npm，换成 yarn 或 pnpm 也就是换个命令的事。

2.3 初始化项目：npm init

好，现在打开终端，创建一个文件夹，然后初始化项目。

mkdir my-first-webpack
cd my-first-webpack
npm init -y

-y 参数的意思是「一路默认」，直接生成 package.json 文件。如果你想自己填项目名、版本、描述等信息，去掉 -y 就行。

生成的 package.json 大概长这样：

{
  "name": "my-first-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

嗯，现在项目骨架有了。接下来，装 Webpack。

2.4 安装 Webpack 与 Webpack CLI

Webpack 有两个核心包：

• webpack：核心库，负责打包逻辑
• webpack-cli：命令行工具，让你能在终端里敲 webpack 命令

两个都得装。我建议装成 开发依赖（devDependencies），因为生产环境不需要 Webpack，只需要它打包后的产物。

npm install webpack webpack-cli --save-dev

装完之后，你的 package.json 里会多出 devDependencies 字段：

"devDependencies": {
  "webpack": "^5.88.0",
  "webpack-cli": "^5.1.4"
}

2.5 创建第一个打包任务

好，环境搭好了，包也装好了。现在我们来写点代码，让 Webpack 真正跑起来。

第一步：创建源文件

在项目根目录下，新建一个 src 文件夹，里面放一个 index.js：

// src/index.js
function hello() {
  console.log('Hello, Webpack!');
}

hello();

就这么简单。一个函数，调用一下。

第二步：配置打包命令

打开 package.json，在 scripts 字段里加一条：

"scripts": {
  "build": "webpack"
}

这样，你以后只需要在终端里敲 npm run build，就能启动 Webpack 打包了。

第三步：运行打包

在终端里执行：

npm run build

你会看到类似这样的输出：

asset main.js 1.23 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
./src/index.js 63 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

嗯，有个警告，说没设置 mode。这个我们后面再讲。重要的是——打包成功了！

看看项目根目录，是不是多了一个 dist 文件夹？里面有个 main.js。这就是 Webpack 打包后的产物。打开看看，你会发现它把 src/index.js 里的代码「包裹」了一层，变成了浏览器能直接运行的格式。

2.6 避坑指南：我踩过的那些坑

最后，分享几个我实际遇到过的问题，你遇到了别慌：

• 报错 Cannot find module 'webpack'：多半是没装对位置。检查一下 node_modules 里有没有 webpack 文件夹，或者是不是装成了全局包。
• 报错 command not found: webpack：说明 webpack-cli 没装，或者没在 node_modules/.bin 里。重新执行 npm install webpack-cli --save-dev。
• 打包后文件巨大：因为你没设 mode，默认是 production，但 production 模式会做压缩和优化。如果文件还是大，别担心，后面我们会讲怎么拆包。

好，这一章就到这。你现在已经成功跑通了第一个 Webpack 打包任务。虽然只是「hello world」，但万丈高楼平地起，这一步很关键。

下一章，我们会深入 webpack.config.js，看看怎么配置入口、出口和模式。到时候，你就能真正掌控 Webpack 的行为了。