构建 Webpack 知识体系 | 青训营

什么是Webpack

前端项目由什么构成？——资源：PNG、JPG、GIF、WEBP、JS、TS、css、Less、Vue、JSX、Sass等。

Webpack：本质上是一种前端资源编译、打包工具。

多份资源文件打包成一个 Bundle
支持 Babel、Eslint、TS、CoffeScript、Less、Sass
支持模块化处理 css、图片等资源文件
支持 HMR + 开发服务器
支持持续监听、持续构建
支持代码分离
支持 Tree-shaking
支持 Sourcemap
多份资源文件打包成一个 Bundle： Webpack可以将项目中的多个资源文件，如多个JavaScript模块、CSS文件、图片等，打包成一个或多个Bundle文件，以减少网络请求次数，提高页面加载性能。
支持各种前端语言和预处理器： Webpack支持处理不同类型的文件，包括JavaScript（支持ES6及以上版本）、TypeScript、CoffeeScript等，以及CSS预处理器（Less、Sass）、图片等。
模块化处理资源文件： Webpack支持模块化开发，可以将应用程序拆分成多个模块，帮助组织代码并按需加载资源。
HMR + 开发服务器： Webpack支持热模块替换（Hot Module Replacement，HMR），使在开发过程中的代码更新能够实时反映在浏览器中，同时也提供了一个开发服务器来快速调试应用。
持续监听、持续构建： Webpack可以在开发模式下持续监听文件变化，并实时重新构建Bundle，方便开发过程中的调试。
代码分离： Webpack支持将应用程序拆分成多个Bundle，以便根据需要按需加载，从而提高应用的性能。
Tree-shaking： Webpack可以通过静态代码分析，将没有使用的代码从Bundle中删除，从而减少最终文件的大小。
Sourcemap： Webpack可以生成源代码映射文件，使调试时能够在压缩后的代码中定位到源代码中的错误位置。

Webpack的核心流程涉及资源文件的加载、解析、转换、合并和输出，同时还支持各种Loader和Plugin组件来处理不同类型的文件和执行额外的任务。

Webpack打包核心流程

Webpack的打包核心流程涉及一系列的步骤，它将多个资源文件（例如JavaScript、CSS、图片等）转换、合并、优化，并最终生成一个或多个Bundle文件。以下是Webpack打包的核心流程：

入口文件配置： 在Webpack的配置文件中，通过entry选项指定一个或多个入口文件。入口文件是Webpack构建的起点，Webpack会从这些文件开始递归解析依赖关系。
依赖解析： Webpack会根据入口文件，递归地解析各个模块之间的依赖关系。它会分析模块之间的import、require等语句，构建整个应用的依赖图谱。
加载器处理： 对于非JavaScript文件（例如CSS、图片等），Webpack会使用配置的Loader进行处理。每个Loader负责将特定类型的文件转换成Webpack可以处理的模块。
插件执行： 在整个构建过程中，Webpack会触发不同的生命周期事件。插件可以监听这些事件，执行各种任务，例如生成HTML文件、提取CSS、压缩代码等。
代码分割： Webpack支持代码分割（Code Splitting），将代码拆分成多个Bundle文件，使得页面加载时只需下载当前页面所需的代码，提高性能。
优化与压缩： Webpack可以对输出的Bundle进行优化和压缩，例如去除无用的代码、合并重复的模块、压缩JavaScript等。
输出文件： 最终，Webpack将处理后的模块打包成一个或多个Bundle文件。通过配置的output选项，指定输出的目录、文件名等信息。
开发服务器和热模块替换： 在开发环境中，Webpack可以启动开发服务器，支持热模块替换（HMR），使代码修改能够实时反映在浏览器中，提高开发效率。

Loader组件

在Webpack中，Loader是一种用于处理特定类型的文件的插件。它允许你在Webpack打包过程中，对不同类型的资源文件进行转换、编译、处理等操作，将它们转换成可以被添加到最终Bundle中的模块。

Loader通常用于处理非JavaScript类型的文件，比如处理CSS、图片、字体、模板等文件。Webpack的配置中，可以针对不同类型的文件指定不同的Loader，每个Loader都会对匹配的文件进行相应的处理。

以下是一些常见的Loader示例：

babel-loader： 用于将ES6+的JavaScript代码转换为浏览器可执行的ES5代码，实现浏览器兼容性。
css-loader 和 style-loader： 用于处理CSS文件。css-loader负责解析CSS文件，style-loader将解析后的CSS以标签的形式插入到页面中。
file-loader 和 url-loader： 用于处理图片、字体等文件。file-loader将文件复制到输出目录，并返回文件的URL，url-loader可以将文件转换成DataURL以减少HTTP请求。
sass-loader 和 less-loader： 用于处理Sass和Less等CSS预处理器的文件，将其转换为浏览器可识别的CSS。
html-loader： 用于解析HTML文件中的图片、视频等资源，将其作为模块导入到代码中。
json-loader： 用于加载JSON文件并将其转换为JavaScript对象。
ts-loader： 用于处理TypeScript文件，将其转换为JavaScript代码。
vue-loader： 用于处理Vue单文件组件，将其转换为JavaScript模块。

Plugin组件

在Webpack中，Plugin（插件）是用于执行范围更广的任务和功能的组件，它可以用来执行各种任务，从而扩展Webpack的功能。与Loader不同，Loader主要用于针对特定类型的文件进行转换和处理，而Plugin用于在整个构建过程中执行更广泛的任务，例如优化、资源管理、代码生成等。

Webpack的插件系统基于事件机制，插件可以监听Webpack的不同生命周期事件，并在特定的事件发生时执行相应的操作。

以下是一些常见的Webpack插件及其功能：

HtmlWebpackPlugin： 自动生成HTML文件，并自动将打包后的资源（如JS、CSS）引入到HTML中。
MiniCssExtractPlugin： 用于将CSS从JS文件中提取出来，生成独立的CSS文件。
CleanWebpackPlugin： 在每次构建前清理输出目录，防止旧的文件堆积。
OptimizeCssAssetsWebpackPlugin： 用于优化和压缩CSS资源。
CopyWebpackPlugin： 用于将文件或目录复制到构建输出目录。
DefinePlugin： 用于定义全局的编译时常量，可以在代码中访问这些常量。
ProvidePlugin： 自动加载模块，无需显式导入，用于在模块中注入全局变量。
WebpackBundleAnalyzer： 生成构建后的Bundle分析报告，用于优化资源和性能。
HotModuleReplacementPlugin： 启用热模块替换，用于在开发过程中实现模块的热更新。
UglifyJsPlugin（已废弃）/ TerserPlugin： 用于压缩和混淆JavaScript代码。
ESLintWebpackPlugin： 在构建过程中运行ESLint检查，帮助维护代码质量。
ProvidePlugin： 自动加载模块，无需手动导入，可以在模块中注入全局变量。

如何学习Webpack

了解基本概念： 你已经做得很好，了解Webpack的基本概念是学习的第一步。
官方文档： Webpack的官方文档是学习的最佳资源，详细介绍了各种配置选项、插件和示例。
实践练习： 创建简单的项目并尝试使用Webpack来打包、优化和管理资源，这有助于更深入地理解其工作原理。
学习配置： 学习如何编写Webpack的配置文件（webpack.config.js），配置文件定义了如何处理各种资源和插件的行为。
使用Loader和Plugin： 学习如何使用不同的Loader和Plugin来处理特定类型的文件和任务。
处理复杂场景： 学习如何处理复杂的场景，如多页面应用、代码分离、性能优化等。
社区资源： 在社区中寻找教程、博客文章、视频教程等资源，与其他开发者交流经验和技巧。

Webpack 的基本用法

安装：npm i -D webpack webpack-cli
编辑配置文件
执行编译命令：npx webpack