掘金 | webpack 源码解析之运行

前言

Webpack 是一个现代 JavaScript 应用程序的打包工具。它可以将许多模块（文件）打包成一个或多个打包文件，从而减少 HTTP 请求数，提高加载速度。Webpack 还可以将各种资源（如 CSS、图片、字体）打包成一个文件，便于管理和分发。

运行环境

Webpack 可以运行在多种环境中，包括：

• 命令行界面（CLI）
• Webpack Dev Server
• Webpack Hot Middleware

webpack 版本

Webpack 目前最新版本是 5.x。在本文中，我们将使用 webpack 5.x 来进行讲解。

新建一个 webpack 项目

要新建一个 webpack 项目，我们可以使用以下步骤：

1. 创建一个新文件夹。
2. 在该文件夹中，执行以下命令：

yarn add webpack webpack-cli -D

3. 这将安装 webpack 和 webpack-cli 包。

执行 webpack 命令

要执行 webpack 命令，我们可以使用以下步骤：

1. 打开终端窗口。
2. 导航到 webpack 项目的根目录。
3. 执行以下命令：

webpack

4. 这将运行 webpack 并生成一个打包文件。

webpack 的包

Webpack 由以下几个包组成：

• webpack：核心包，用于打包 JavaScript 代码。
• webpack-cli：命令行界面工具，用于运行 webpack。
• webpack-dev-server：开发服务器，用于在本地运行 webpack。
• webpack-dev-middleware：中间件，用于将 webpack-dev-server 集成到 Express.js 应用程序中。
• webpack-hot-middleware：中间件，用于实现热更新功能。

webpack.config.js 文件

Webpack.config.js 文件是 webpack 的配置文件。它用于配置 webpack 的各种选项，例如：

• 输入文件
• 输出文件
• 加载器
• 插件

webpack.js 文件

Webpack.js 文件是 webpack 的入口文件。它是 webpack 打包的第一个文件。Webpack.js 文件通常是一个 JavaScript 文件，但它也可以是一个 JSON 文件或一个 TypeScript 文件。

Webpack-dev-server

Webpack-dev-server 是一个开发服务器，用于在本地运行 webpack。Webpack-dev-server 可以自动编译和打包 JavaScript 代码，并将其提供给浏览器。Webpack-dev-server 还支持热更新功能，当 JavaScript 代码发生变化时，可以自动重新编译和打包 JavaScript 代码，并刷新浏览器。

Webpack-dev-middleware

Webpack-dev-middleware 是一个中间件，用于将 webpack-dev-server 集成到 Express.js 应用程序中。Webpack-dev-middleware 可以使 Express.js 应用程序能够自动编译和打包 JavaScript 代码，并将其提供给浏览器。Webpack-dev-middleware 也支持热更新功能。

Webpack-hot-middleware

Webpack-hot-middleware 是一个中间件，用于实现热更新功能。Webpack-hot-middleware 可以使浏览器在 JavaScript 代码发生变化时自动重新加载页面。

结语

本文介绍了 webpack 的运行过程，包括 webpack 的运行环境、webpack 的版本、如何新建一个 webpack 项目、如何执行 webpack 命令、webpack 的包、webpack.config.js 文件、webpack.js 文件、webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware 等。希望本文对您快速入门 webpack 有所帮助。