「Webpack知识体系」｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 12 天。本堂课重点内容为 Webpack知识体系｜青训营笔记。

一、前言 Webpack 是当前最流行的 JavaScript 模块打包工具，它可以处理各种类型的资源文件，如 JavaScript、CSS、图片等，最终将所有文件打包为一个或多个输出文件。输出文件的作用是将所有文件组合到一起，以便于在浏览器或其他运行环境中使用。

Webpack 的配置文件中，可以指定输出文件的文件名、路径和格式。Webpack 会自动检测资源文件的依赖关系，并将所有文件打包到输出文件中，这样，在浏览器中使用时，只需要加载一个输出文件即可。

输出文件的格式可以是 JavaScript、CSS、图片等，它们的打包方式也可以是不同的。例如，JavaScript 文件可以被打包为单个文件或多个文件，CSS 文件可以被打包到 JavaScript 文件中或单独输出。因此，根据项目需要，可以选择合适的输出文件格式和打包方式。

二、Webpack 的架构

Webpack 的架构主要包括四个部分：入口文件、输出文件、加载器和插件。入口文件是打包的起点，它指定了打包的入口文件；输出文件是打包的终点，它指定了打包后的文件路径；加载器是 Webpack 的核心，它负责将不同格式的文件转换为模块；插件是 Webpack 的扩展，它可以实现额外的功能。

三、核心概念

1. 模块

Webpack 支持多种模块格式，包括 CommonJS、ES6 模块、CSS 模块等。模块是 Webpack 的基础，它规定了如何处理不同格式的文件。

2. 入口文件

入口文件是 Webpack 打包的起点，它指定了打包的入口文件。入口文件的配置在 Webpack 的配置文件中，可以指定多个入口文件，实现多个文件的打包。