2、环境搭建与初体验：Node.js安装、npm/yarn/pnpm配置、创建第一个Webpack项目、webpack-cli使用、查看打包产物

2.1 先把Node.js搞定

说实话，Webpack这东西，离开了Node.js根本跑不起来。我见过不少新手一上来就装Webpack，结果报错一堆，最后发现是Node版本不对。

Node.js的安装其实没啥技术含量。去官网下载LTS版本就行。我个人习惯用nvm来管理Node版本，尤其是你同时维护好几个项目的时候——有的项目要用Node 14，有的要用Node 18，来回切换太痛苦了。

我的小建议： 别用最新版Node。Webpack生态里有些老插件还没适配。LTS版本最稳，我踩过这个坑。

装完之后，打开终端验证一下：

node -v
npm -v

能看到版本号，说明环境搭好了。

2.2 npm、yarn、pnpm，到底选哪个？

这个问题，几乎每个来我团队的新人都会问。我的回答是：看项目，看团队，看你个人习惯。

工具 特点 我推荐的使用场景
npm Node自带，生态最广 个人项目、快速原型
yarn 速度快，有lock文件 团队协作、生产环境
pnpm 磁盘空间省，安装飞快 大型项目、多项目共用依赖

npm现在其实也不差了。从npm v7开始，lock文件机制和性能都有大幅提升。但如果你问我个人偏好——我更喜欢yarn。为什么？因为它的输出信息更清晰，报错的时候一眼就能看出问题在哪。

配置镜像源是个必做操作。国内环境你懂的：

# npm
npm config set registry https://registry.npmmirror.com

# yarn
yarn config set registry https://registry.npmmirror.com

# pnpm
pnpm config set registry https://registry.npmmirror.com
注意： 我曾经因为忘记配镜像源，在公司网络下装一个包等了20分钟。后来发现是默认registry被墙了。配好镜像源，能省下你大量时间。

2.3 创建第一个Webpack项目

好，环境搭好了，咱们来真的。

先建个文件夹，然后初始化：

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

这一步会生成一个 package.json。嗯，这就是你项目的“身份证”。

接下来装Webpack：

npm install webpack webpack-cli --save-dev

为什么要加 --save-dev？因为Webpack是开发依赖，生产环境不需要它。你想想看，用户打开你的网页，难道还要先装个Webpack才能看？显然不合理。

然后创建项目结构：

my-first-webpack/
├── src/
│   └── index.js
├── dist/
├── package.json
└── webpack.config.js

在 src/index.js 里写点东西：

function hello() {
  console.log('Hello, Webpack!');
}

hello();

在 webpack.config.js 里做最基础的配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
};

这里我解释一下：entry 是入口文件，Webpack从这儿开始打包。output 是打包后的文件放哪。mode 设为 development，打包出来的代码可读性更好，方便调试。

2.4 webpack-cli 怎么用？

装好webpack-cli之后，你可以在终端里直接敲命令了。但每次都敲一长串命令，谁受得了？

我习惯在 package.json 的 scripts 里加一条：

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

然后运行：

npm run build

就这么简单。Webpack会读取 webpack.config.js 里的配置，然后开始打包。

如果你想临时覆盖某个配置，也可以用命令行参数：

npx webpack --mode production --entry ./src/index.js

但说实话，我很少这么干。配置写在文件里，清晰明了，还能被版本管理。命令行参数适合快速测试，不适合长期维护。

一个小技巧： 用 npx webpack --stats detailed 可以看到打包的详细信息，包括每个模块的大小、依赖关系等。排查问题的时候特别好用。

2.5 看看打包产物长什么样

打包完成后，去 dist 目录下看看。你会看到一个 bundle.js 文件。

打开它，你会发现里面不再是简单的 console.log 了。Webpack把我们的代码包了一层，加上了模块加载的逻辑。说白了，它把你的代码变成了一个可以在浏览器里直接运行的模块系统。

我刚开始学Webpack的时候，特意去读了这个打包产物。虽然一开始看得云里雾里，但读多了，你对Webpack的理解会深很多。它本质上就是一个“代码转换器”——把各种模块规范统一成浏览器能理解的形式。

你可以试试在 dist 目录下建一个 index.html：

<!DOCTYPE html>
<html>
<head>
  <title>My First Webpack</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

用浏览器打开这个HTML，打开控制台，你会看到 Hello, Webpack! 被打印出来了。

这一刻，你算是真正“跑通”了Webpack。

核心要点回顾：
  • Node.js是Webpack的运行基础，推荐用LTS版本
  • npm/yarn/pnpm各有优劣，选适合你项目的就行
  • 镜像源一定要配，不然装包会慢到怀疑人生
  • webpack.config.js是核心配置文件，entry和output是最基本的两个配置项
  • 打包产物bundle.js是Webpack处理后的结果，值得打开看看

环境搭好了，项目跑起来了。下一章，咱们开始深入Webpack的核心概念——Loader和Plugin。到时候你会发现，Webpack真正的威力才刚刚开始展现。

← 上一章 📖 返回目录 下一章 →