梳理 Webpack 知识体系与学习资源推荐前端webpack

前言关于 Webpack 之前已经有写过几篇零散的文章:

由零开始使用 Webpack 来搭建 React 项目
Webpack Sourcemap 回顾
升级 Webpack5 实践
如何编写一个 Webpack Loader
如何编写一个 Webpack Plugin

【梳理 Webpack 知识体系与学习资源推荐】而本文的内容则不会不再赘述各种 Webpack 细节，而是梳理一遍 Webpack 的相关知识（内容可能不算全，但也可当回顾 Webpack 了），并推荐看过的一些大佬的文章供学习阅读参考，希望有助于大家深入 Webpack 的学习。
本文从 Webpack 基础、优化、原理三个角度出发来进行梳理 Webpack 知识体系，以下是我整理的一份 Webpack 知识体系思维导图：

文章图片

本文也会同步于我的 Github
Webpack 核心基础 Webpack 基础的就不说了
项目配置

文章图片

由零开始使用 Webpack 来搭建 React 项目
带你深度解锁 Webpack 系列(基础篇)

Loader

文章图片

什么是 Loader
Loader 通常指打包的方案，作用即是让 webpack 拥有了加载和解析? JavaScript ?件的能?

Loader 知识分享：关于 Loader 比较全的介绍

常用的 Loader

babel-loader：将 ES6+ 语法转换为 ES5 语法
file-loader：把?件输出到?个指定目录中，在代码中通过相对 URL 去引?输出的?件。
url-loader：可以在小于限制文件大小的情况下以 base64 的?式把?件内容注?到代码中去
css-loader：加载 CSS，?持模块化、压缩、?件导?等特性
style-loader：将处理好的 css 通过 style 标签的形式添加到页面上
less-loader：解析 Less 文件
sass-loader：将 SCSS/SASS 代码转换成 CSS
postcss-loader：扩展 CSS 语法，如可以配合 autoprefixer 插件自动补齐 CSS3 前缀

如何编写 Loader
Loader 其实就是一个函数，通过获得处理前的源内容，对原内容执行处理后，返回处理后的内容。

如何编写一个 Webpack Loader：可以先看下我这篇，比较简单的入门
Webpack 原理系列七：如何开发 Loader：较为详细的编写

关于 pitch loader

你不知道的「pitch loader」应用场景

Plugin

文章图片

什么是 Plugin
Plugin 是一个功能扩展器，webpack 的插件体系是一种基于 Tapable 实现的强耦合架构，可以在 webpack 运行到某个时刻的时候，帮我们做一些事情
常用的 Plugin

html-webpack-plugin：依据一个 HTML 模板，生成 HTML 文件，并把打包生成的 js 自动引入到这个 HTML 文件中
terser-webpack-plugin: 支持压缩 ES6，同时可以开启parallel参数，使用多进程压缩，加快压缩
mini-css-extract-plugin: CSS 提取到单独的?件中, ?持按需加载
webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)
speed-measure-webpack-plugin: 可以看到整个打包耗时、每个 Plugin 和 Loader 耗时

如何编写 Plugin

如何编写一个 Webpack Plugin
Webpack 原理系列二：插件架构原理与应用：介绍了 Plugin 的核心库——Tapable

SourceMap

文章图片

这个只是因为之前做过总结，所以也被我单独拎出来做一大部分了。
Sourcemap 是为了解决开发代码与实际运行代码不一致时造成无法 debug 的问题，它是源代码和目标代码出错位置的映射，Webpack4 的 Webpack5 的 devtool 配置项的关键词顺序有点区别，注意下这个。

Webpack Sourcemap 回顾
深入浅出之 Source Map

Webpack 优化

文章图片

这个实用性比较高，可以对项目进行各种优化。上面思维导图就列得不全，这个具体可以去看各种优化文章吧。
需要注意辨别的是，有些优化方式在升级 Webpack4 或 Webpack5 的时候就过时了；其次，本身升级 Webpack5 就是个大优化，胜过你在低版本上各种优化搞法，愿没有 Webpack 配置工程师。