Webpack的初学者指南-js教程-PHP中文网

首页

web前端

js教程

Webpack的初学者指南

Christopher Nolan

Feb 10, 2025 am 09:59 AM

A Beginner’s Guide to Webpack

本文探讨了Webpack——一个强大的静态模块打包器，它如何简化和优化Web开发工作流程。尽管Webpack文档详尽，但初学者仍可能面临学习曲线陡峭的问题。本教程旨在帮助您掌握Webpack的核心概念，并逐步引导您进行实践操作。

核心要点：

Webpack基础： Webpack将所有文件和资源视为模块，构建依赖关系图，生成一个或多个用于Web部署的bundle。
核心概念概述： 理解入口（entry）、输出（output）、加载器（loaders）、插件（plugins）和模式（mode）设置，以便在不同环境（开发、生产）中有效使用Webpack。
Webpack 5增强功能： 第5版引入了持久缓存、改进的Tree Shaking以及删除自动Node.js polyfills等功能，从而提高性能并减小bundle大小。
Webpack入门： 通过设置基本配置文件、理解默认设置以及使用html-webpack-plugin等插件进行动态HTML生成来启动Webpack项目。
高级用法： 学习使用style-loader和css-loader处理CSS，使用内置模块替换旧的加载器来管理资源，并使用Webpack的开发服务器进行实时重载来优化开发流程。
生产环境最佳实践： 利用Webpack的功能来转换现代JavaScript，管理样式和资源，并使用webpack-dev-server等工具以及针对生产版本构建的优化来加快开发速度。

什么是Webpack？

Webpack的核心是一个静态模块打包器。在特定项目中，Webpack将所有文件和资源视为模块，并依赖于一个依赖关系图。该依赖关系图描述了模块之间如何通过文件之间的引用（require和import语句）相互关联。Webpack静态地遍历所有模块以构建该图，并使用它来生成单个bundle（或多个bundle）——一个JavaScript文件，其中包含来自所有模块的代码，并按正确的顺序组合。“静态地”意味着当Webpack构建其依赖关系图时，它不会执行源代码，而是将模块及其依赖项组合到一个bundle中。然后，可以将其包含在您的HTML文件中。

Webpack主要概念：

在深入实践之前，我们需要清楚地理解Webpack的一些主要概念：

入口（Entry）： 入口点是Webpack用于开始构建其内部依赖关系图的模块。从那里，它确定入口点依赖的其它模块和库（直接和间接），并将它们包含在图中，直到没有剩余依赖项。默认情况下，entry属性设置为./src/index.js，但我们可以在Webpack配置文件中指定不同的模块（甚至多个模块）。
输出（Output）： output属性指示Webpack在哪里发出bundle以及要为文件使用的名称。此属性的默认值为主要bundle的./dist/main.js和其它生成文件的./dist（例如图像）。当然，我们可以根据需要在配置中指定不同的值。
加载器（Loaders）： 默认情况下，Webpack只理解JavaScript和JSON文件。为了处理其它类型的文件并将它们转换为有效的模块，Webpack使用加载器。加载器转换非JavaScript模块的源代码，允许我们在将这些文件添加到依赖关系图之前对其进行预处理。例如，加载器可以将文件从CoffeeScript语言转换为JavaScript，或将内联图像转换为数据URL。使用加载器，我们甚至可以从JavaScript模块直接导入CSS文件。
插件（Plugins）： 插件用于加载器无法执行的任何其它任务。它们为我们提供了关于资源管理、bundle最小化和优化等的广泛解决方案。
模式（Mode）： 通常，当我们开发应用程序时，我们使用两种类型的源代码——一种用于开发版本构建，一种用于生产版本构建。Webpack允许我们通过将mode参数更改为development、production或none来设置要生成的版本。这允许Webpack使用与每个环境相对应的内置优化。默认值为production。none模式意味着不会使用任何默认优化选项。

Webpack的工作原理：

即使是一个简单的项目也包含HTML、CSS和JavaScript文件。此外，它还可以包含诸如字体、图像等的资源。因此，典型的Webpack工作流程将包括设置具有适当CSS和JS链接以及必要资源的index.html文件。此外，如果您有很多相互依赖的CSS和JS模块，则需要将它们优化并正确组合到一个准备用于生产的单元中。

为了完成所有这些工作，Webpack依赖于配置。从4版及更高版本开始，Webpack开箱即用地提供了合理的默认值，因此不需要创建配置文件。但是，对于任何非简单的项目，您都需要提供一个特殊的webpack.config.js文件，该文件描述了如何转换文件和资源以及应该生成哪种类型的输出。此文件可能会很快变得庞大，这使得很难理解Webpack的工作方式，除非您了解其工作原理背后的主要概念。

基于提供的配置，Webpack从入口点开始，在构建依赖关系图时解析它遇到的每个模块。如果模块包含依赖项，则会针对每个依赖项递归地执行此过程，直到遍历完成。然后，Webpack将所有项目的模块捆绑到少量bundle中（通常只有一个），以便浏览器加载。

Webpack 5的新增功能：

Webpack 5于2020年10月发布。该公告很长，探讨了对Webpack所做的所有更改。不可能提及所有更改，对于像这样的初学者指南来说也是不必要的。相反，我将尝试列出一些一般要点：

使用持久缓存改进了构建性能。开发人员现在可以启用基于文件系统的缓存，这将加快开发构建速度。
长期缓存也得到了改进。在Webpack 5中，对不影响最小化bundle版本的代码（注释、变量名）所做的更改不会导致缓存失效。此外，还添加了新的算法，这些算法以确定性方式为模块和块分配短数字ID，为导出分配短名称。在Webpack 5中，它们在生产模式下默认启用。
由于更好的Tree Shaking和代码生成，bundle大小得到了改进。由于新的嵌套Tree Shaking功能，Webpack现在能够跟踪对导出嵌套属性的访问。CommonJs Tree Shaking允许我们消除未使用的CommonJs导出。
最低支持的Node.js版本已从6增加到10.13.0（LTS）。
代码库已清理。删除了Webpack 4中标记为已弃用的所有项目。
删除了自动Node.js polyfills。Webpack的先前版本包含对crypto等原生Node.js库的polyfills。在许多情况下，它们是不必要的，并且会大大增加bundle大小。这就是为什么Webpack 5停止自动填充这些核心模块并专注于前端兼容模块的原因。
作为开发的改进，Webpack 5允许我们传递目标列表并支持目标版本。它提供目标路径的自动确定。此外，它还提供自动、唯一的命名，这可以防止使用相同全局变量进行块加载的多个Webpack运行时之间发生冲突。
webpack-dev-server命令现在是webpack serve。
引入了资源模块，它替换了file-loader、raw-loader和url-loader的使用。

入门：

现在我们有了坚实的理论基础，让我们在实践中实现它。

首先，我们将创建一个新目录并切换到它。然后，我们将初始化一个新项目：

mkdir learn-webpack
cd learn-webpack
npm init -y

登录后复制

接下来，我们需要在本地安装Webpack和Webpack CLI（命令行界面）：

npm install webpack webpack-cli --save-dev

登录后复制

然后，我们将创建一个src目录并在其中放入一个index.js文件，使其包含console.log("Hello, Webpack!");。现在我们已经可以运行dev任务以在开发模式下启动Webpack了：

npm run dev

登录后复制

如前所述，Webpack将默认入口点设置为./src/index.js，并将默认输出设置为./dist/main.js。因此，当我们运行dev任务时，Webpack所做的是获取index.js文件的源代码并将最终代码捆绑到main.js文件中。

为了验证我们是否获得了正确的输出，我们需要在浏览器中显示结果。为此，让我们在dist目录中创建一个index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Getting Started With Webpack</title>
  </head>
  <body>
    <🎜>
  </body>
</html>

登录后复制

现在，如果我们在浏览器中打开该文件，我们应该在控制台中看到“Hello, Webpack!”消息。

(以下内容由于篇幅限制，将简略概括，保留核心步骤和关键代码片段。完整的教程请参考原文。)

使用html-webpack-plugin： 安装并配置html-webpack-plugin插件，自动生成和更新index.html文件，避免手动修改。

自定义entry和output： 修改webpack.config.js，自定义入口文件和输出目录及文件名。

转换现代JavaScript到ES5： 安装babel-loader，配置webpack.config.js，将ES6代码转换为ES5兼容代码。

处理样式： 安装css-loader和style-loader，在webpack.config.js中配置，将CSS文件导入并应用到页面。

资源管理： 使用Webpack 5内置的asset/resource模块处理图片等资源。

使用webpack-dev-server加速开发： 安装并配置webpack-dev-server，实现实时重载。

清理输出： 使用clean-webpack-plugin插件清理输出目录。

结论：

本教程仅介绍了Webpack的核心概念，Webpack还提供了许多其它功能、插件和不同的技术。建议您参考官方文档和其它学习资源进一步深入学习。