Webpack教程系列（二）：环境搭建与打包案例

1. 环境准备

在开始使用 Webpack 之前，我们需要确保本地环境已经安装了以下工具：

1.1 Node.js 和 npm

Webpack 是基于 Node.js 的构建工具，因此需要先安装 Node.js 和 npm（Node.js 的包管理工具）。

  • 下载并安装 Node.js：Node.js 官网
  • 安装完成后，检查是否安装成功：
bash
1
2
node -v  # 查看 Node.js 版本
npm -v   # 查看 npm 版本

1.2 初始化项目

创建一个新的项目目录，并初始化 package.json 文件：

bash
1
2
3
mkdir webpack-demo  # 创建项目目录
cd webpack-demo     # 进入项目目录
npm init -y         # 初始化 package.json

2. 安装 Webpack 和 Webpack CLI

Webpack 将核心功能和命令行工具分离，因此需要分别安装 webpack 和 webpack-cli。

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

安装完成后，检查是否安装成功：

bash
1
npx webpack -v  # 查看 Webpack 版本

3. 创建项目结构

在项目根目录下创建以下文件和目录：

plaintext
1
2
3
4
5
6
webpack-demo/
├── src/            # 源码目录
│   └── index.js    # 入口文件
├── dist/           # 打包输出目录（Webpack 自动生成）
├── index.html      # HTML 文件
└── package.json    # 项目配置文件

3.1 编写入口文件

在 src/index.js 中编写一些简单的代码：

javascript
1
2
3
4
5
6
// src/index.js
function helloWebpack() {
  console.log('Hello, Webpack!');
}

helloWebpack();

3.2 编写 HTML 文件

在 index.html 中编写一个简单的 HTML 文件：

html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Demo</title>
</head>
<body>
  <h1>Hello, Webpack!</h1>
  <script src="./dist/main.js"></script> <!-- 打包后的文件 -->
</body>
</html>

4. 配置 Webpack*

Webpack 4 支持零配置开箱即用，但为了更好地理解其工作原理，我们可以手动创建一个配置文件。

在项目根目录下创建 webpack.config.js：

javascript
1
2
3
4
5
6
7
8
9
10
11
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'main.js' // 输出文件名
  },
  mode: 'development' // 开发模式
};

4.1 配置说明

  • entry：指定入口文件路径。
  • output：指定输出文件的路径和名称。
  • mode：设置打包模式，development 表示开发模式，production 表示生产模式。

5. 运行 Webpack

在终端中运行以下命令，开始打包：

bash
1
npx webpack

如果一切顺利，Webpack 会输出以下信息：

plaintext
1
2
3
asset main.js 1.38 KiB [emitted] (name: main)
./src/index.js 81 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 83 ms

此时，项目目录下会生成一个 dist/main.js 文件，这就是 Webpack 打包后的结果。

6. 查看结果

打开 index.html 文件，并在浏览器中运行。打开开发者工具（F12），可以看到控制台输出了 Hello, Webpack!，说明打包成功！

7. 总结

本文介绍了如何搭建 Webpack 4 的开发环境，并完成了第一个 Webpack 打包示例。通过这个简单的例子，我们了解了 Webpack 的基本用法和工作流程。

在下一篇文章中，我们将深入探讨 Webpack 的入口（Entry）与出口（Output）配置，并学习如何处理多入口和多出口的场景。

预告：

  • 下一篇：Webpack 入口与出口配置详解