1.3 安装-Webpack实战：入门、进阶与调优(上)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(上)

### 1.3 安装

在深入探讨Webpack的实战应用之前，正确地安装Webpack及其相关依赖是迈向成功开发的第一步。Webpack作为一款强大的现代JavaScript应用程序的静态模块打包器，它能够将项目中的各种资源（如JavaScript、CSS、图片等）打包成一个或多个bundle，以便于在浏览器中加载。本章节将详细介绍Webpack的安装过程，包括环境准备、Node.js和npm/yarn的安装、Webpack及其CLI工具的安装，以及初始化一个Webpack项目的基本步骤。

#### 1.3.1 环境准备

在开始安装Webpack之前，确保你的开发环境满足以下基本要求：

- **操作系统**：Webpack可以在Windows、macOS、Linux等多种操作系统上运行，因此无需担心操作系统的兼容性问题。
- **编辑器/IDE**：选择一个你熟悉的代码编辑器或集成开发环境（IDE），如Visual Studio Code、WebStorm、Sublime Text等，这将有助于你更高效地编写和管理代码。
- **版本控制**：虽然不直接涉及Webpack的安装，但推荐你熟悉Git等版本控制系统，以便于项目管理和团队协作。

#### 1.3.2 安装Node.js和npm/yarn

Webpack是一个基于Node.js的工具，因此你需要先在你的机器上安装Node.js。Node.js安装包通常会附带npm（Node Package Manager），npm是Node.js的包管理工具，用于安装和管理JavaScript包。此外，yarn是另一个流行的包管理工具，与npm兼容，但提供了一些改进，如更快的安装速度和更稳定的依赖管理。

##### 安装Node.js

1. **访问Node.js官网**（https://nodejs.org/）：在官网下载适合你操作系统的Node.js安装程序。
2. **运行安装程序**：按照安装向导的指示完成安装。安装过程中，通常会询问你是否希望npm随Node.js一起安装；选择是，因为npm是后续安装Webpack所必需的。
3. **验证安装**：安装完成后，打开命令行工具（在Windows上可以是CMD或PowerShell，在macOS或Linux上则是Terminal），输入`node -v`和`npm -v`来检查Node.js和npm是否成功安装以及它们的版本信息。

##### 安装yarn（可选）

如果你决定使用yarn作为包管理工具，可以通过npm来安装它：

```bash
npm install -g yarn
```

安装完成后，同样可以通过在命令行中输入`yarn -v`来验证yarn是否安装成功。

#### 1.3.3 安装Webpack及其CLI

Webpack本身是一个Node.js模块，因此你可以通过npm或yarn来安装它。此外，为了更方便地在命令行中运行Webpack命令，你还需要安装Webpack的命令行接口（CLI）。

##### 使用npm安装

1. **初始化npm项目**（如果尚未初始化）：在你的项目根目录下打开命令行工具，运行`npm init -y`以快速生成一个默认的`package.json`文件。这个文件用于管理项目的依赖、脚本等。

2. **安装Webpack和Webpack CLI**：

```bash
   npm install --save-dev webpack webpack-cli
   ```

这里使用了`--save-dev`（或简写为`-D`）参数，表示将Webpack和Webpack CLI安装为开发依赖，而不是项目运行时的依赖。

##### 使用yarn安装

如果你使用的是yarn作为包管理工具，安装Webpack和Webpack CLI的命令如下：

```bash
yarn add webpack webpack-cli --dev
```

同样地，`--dev`参数表示这些依赖是开发时需要的，不会打包进最终的生产环境中。

#### 1.3.4 验证安装

安装完成后，你可以通过命令行工具来验证Webpack是否安装成功。在你的项目根目录下，运行以下命令来检查Webpack的版本：

```bash
npx webpack --version
# 或者如果你使用yarn
yarn webpack --version
```

注意：由于Webpack CLI被安装为局部依赖，你可能需要使用`npx`（npm包执行器）来直接运行Webpack命令，它会临时安装Webpack CLI并执行命令。如果你将Webpack CLI添加到了全局依赖中（虽然不推荐），则可以直接使用`webpack --version`。

#### 1.3.5 初始化Webpack配置

虽然Webpack可以在没有配置文件的情况下运行（使用默认设置），但在实际项目中，你通常需要创建一个`webpack.config.js`文件来定义你的Webpack配置。这个文件可以包含入口点、输出路径、加载器（loaders）、插件等多种配置选项。

1. **创建`webpack.config.js`**：在项目根目录下创建一个名为`webpack.config.js`的文件，并添加一些基本的配置。例如：

```javascript
   const path = require('path');

module.exports = {
     entry: './src/index.js', // 指定入口文件
     output: {
       filename: 'bundle.js', // 打包后的文件名
       path: path.resolve(__dirname, 'dist'), // 输出目录
     },
     mode: 'development', // 开发模式，启用开发时的优化和错误提示
   };
   ```

2. **配置脚本**：在`package.json`的`scripts`部分添加一个脚本来运行Webpack。这样，你就可以通过npm脚本来运行Webpack，而无需全局安装Webpack CLI。

```json
   "scripts": {
     "build": "webpack --config webpack.config.js"
   }
   ```

3. **运行Webpack**：现在，你可以通过运行`npm run build`或`yarn build`命令来启动Webpack打包过程了。

#### 1.3.6 小结

至此，你已经成功地在你的项目中安装了Webpack及其CLI，并初步配置了Webpack。通过本节的学习，你应该掌握了环境准备、Node.js和npm/yarn的安装、Webpack及其CLI的安装、以及Webpack配置的初始化等关键步骤。这为后续深入学习Webpack的更多高级特性和实战应用打下了坚实的基础。在接下来的章节中，我们将继续探索Webpack的各种功能，包括加载器（loaders）、插件（plugins）、开发服务器（dev server）等，以帮助你全面掌握Webpack的使用技巧。

该分类下的相关小册推荐：

全解webpack前端开发环境定制

Webpack零基础入门

webpack指南

Webpack实战：入门、进阶与调优(下)

Webpack实战：入门、进阶与调优(中)