前言之前写过几篇关于Webpack的零散文章：从零开始使用Webpack搭建React项目WebpackSourcemap复习升级Webpack5实践HowtowriteaWebpackLoaderHowto写一个WebpackPlugin本文内容不再赘述各种Webpack的细节，而是梳理Webpack的相关知识（内容可能不完整，但也可以作为Webpack的复习），并推荐一些你读过的大佬们的文章。学习阅读参考，希望对大家进一步了解Webpack有所帮助。本文从Webpack基础、优化、原理三个角度梳理Webpack知识体系。以下是我整理的Webpack知识体系思维导图：本文也会同步我的GithubWebpack核心基础Webpack基础知识就不讲了项目配置从零开始使用Webpack搭建一个React项目。带你深度解锁Webpack系列（基础篇）。分享：更全面的Loader介绍常用的Loaderbabel-loader：ES6+语法转ES5语法file-loader：将文件输出到指定目录，在代码中通过相对URL引用输出文件。url-loader：当文件大小小于限制时，可以将文件内容以base64的形式注入到代码中css-loader：加载CSS，支持模块化、压缩、文件导入等特性style-loader：将处理后的css以style标签的形式添加到页面less-loader：解析Less文件sass-loader：将SCSS/SASS代码转换为CSSpostcss-loader：扩展CSS语法，例如可以自动补全autoprefixer插件如何写CSS3前缀LoaderLoader其实是一个函数，通过在处理前获取源内容，对原始内容进行处理后，返回处理后的内容。WebpackLoader的编写方法：可以先看我的文章，比较简单的介绍Webpack原理系列之七：Loader的开发方法：写一个“pitchloader”的应用场景Plugin，你不知道的pitchloaderinmore细节。什么是PluginPlugin是一个Functionextender，webpack的插件体系是基于Tapable的强耦合架构，可以在webpack运行到一定的时候帮我们做一些事情。常用插件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如何写Plugin和Loader耗时如何写一个WebpackPluginWebpack原理系列二：Plugin架构原理及应用：介绍一下Plugin的核心库——TapableSourceMap这只是因为之前做了一个总结，所以也被我拿出来做了很大一部分。sourcemap是为了解决开发代码与实际运行代码不一致时无法调试的问题。它是源代码和目标代码错误位置的映射。Webpack4中Webpack5的devtool配置项的关键字顺序有点不一样，注意这一点。WebpackSourcemapReviewSourceMapWebpack优化比较实用，可以对项目进行各种优化。上面的思维导图没有列出完整。具体可以看各种优化文章。需要注意的是，在升级Webpack4或者Webpack5的时候，一些优化方式已经过时了；其次，升级Webpack5本身就是一个很大的优化，比你在低版本上的各种优化方法要好。希望没有Webpack配置工程师。升级Webpack5实践带你深度解锁Webpack系列（优化）Webpack配置全解析（优化）Webpack原理Webpack打包构建过程...）：Webpack大佬经典原理文章《搞点硬货》从源码窥探Webpack4的原理。.可以阅读：一文看懂webpack的懒加载机制——webpack系列webpack的异步加载原理及分包策略。代码修改保存后，webpack会在不刷新浏览器的情况下重新打包代码更新页面。这部分原理看了下面三篇文章差不多就搞定了：WebpackHMR原理解析了解webpack热更新原理轻松理解webpack热更新原理TreeShakingTreeShaking本质上是剔除无用的JS代码，减少加载量文件。实现前提：代码遵循ES6Module规范，设置mode选项为productionoptimization.usedExports:trueoptimization.minimize:true推荐文章：Webpack|TreeShaking工作原理Webpack原理系列之九：Tree-shaking实现原理构建性能。使用更好的算法和默认值改进长期缓存。更好的TreeShaking和代码生成以改进包大小。提高与网络平台的兼容性。在不引入任何破坏性更改的情况下，清理在实施v4功能时处于奇怪状态的内部结构。尝试通过现在引入重大更改为未来的功能做准备，尽可能长时间地使用v5。Webpack5的另一个重要特性是模块联合。主要是为了更好的代码共享，让代码可以直接跨应用使用CDN共享。不再需要在本地安装NPM包，构建和发布它们。可以阅读这篇文章：Modules联邦分析推荐文章：时隔两年，webpack5正式发布！Webpack5入门指南Webpack系统教程推荐你好Webpack历史最用心的Webpack4.0中级教程-除了配置你还应该知道的事情精通Webpack核心原理
