06：干货速查——Webpack常用Loader、Plugin与优质学习资源全汇总
约 2654 字大约 9 分钟
2026-04-04
本文是《深入浅出Webpack》前端实战系列的第五篇内容，聚焦Webpack生态中最常用的Loader、Plugin工具集及优质学习资源做系统化汇总。通过本文的速查指南，你可以快速匹配不同开发场景（文件加载、代码编译、样式转换、构建优化等）对应的工具，同时掌握高效的Webpack学习路径，解决开发中“找工具、找资源”的效率问题。
本篇核心收获
- 全面掌握Webpack六大类常用Loader的功能、适用场景及官方/社区仓库地址
- 清晰认知Webpack三大类核心Plugin的作用、优化方向及实际应用场景
- 精准匹配“文件加载/代码编译/样式转换/构建优化”等需求对应的工具选型
- 梳理并收藏覆盖“入门-进阶-源码”的Webpack优质学习资源
- 快速定位各类Webpack工具的核心能力，提升配置与开发效率
一、常用Loader全汇总
Loader是Webpack实现不同类型文件模块化加载的核心，不同Loader负责将各类文件（文本、样式、脚本、模版等）转换为Webpack可处理的模块。以下是六大类常用Loader的完整汇总，涵盖开发中绝大多数文件处理场景：
1.1 加载文件类Loader
此类Loader主要负责各类文件的加载、输出或内容注入，核心能力及对应仓库如下表所示：
| Loader名称 | 仓库地址 | 核心功能 |
|---|---|---|
| raw-loader | https://github.com/webpack-contrib/raw-loader | 将文本文件的内容直接加载到代码中 |
| file-loader | https://github.com/webpack-contrib/file-loader | 将文件输出到指定文件夹，代码中通过相对URL引用输出文件 |
| url-loader | https://github.com/webpack-contrib/url-loader | 与file-loader类似，小文件可通过base64方式注入代码中 |
| source-map-loader | https://github.com/webpack-contrib/source-map-loader | 加载额外的Source Map文件，方便断点调试 |
| svg-inline-loader | https://github.com/webpack-contrib/svg-inline-loader | 将压缩后的SVG内容注入代码中 |
| node-loader | https://github.com/webpack-contrib/node-loader | 加载Node.js原生模块的.node文件 |
| image-webpack-loader | https://github.com/tcoopman/image-webpack-loader | 加载并压缩图片文件 |
| json-loader | https://github.com/webpack-contrib/json-loader | 加载JSON文件 |
| yaml-loader | https://github.com/okonet/yaml-loader | 加载YAML文件 |
1.2 编译模版类Loader
此类Loader负责将各类模版语言编译为JavaScript函数或HTML，适配不同的模版开发场景：
| Loader名称 | 仓库地址 | 核心功能 |
|---|---|---|
| pug-loader | https://github.com/pugjs/pug-loader | 将Pug模版转换成JavaScript函数并返回 |
| handlebars-loader | https://github.com/pcardune/handlebars-loader | 将Handlebars模版编译成函数并返回 |
| ejs-loader | https://github.com/okonet/ejs-loader | 将EJS模版编译成函数并返回 |
| haml-loader | https://github.com/AlexanderPavlenko/haml-loader | 将HAML代码转换成HTML |
| markdown-loader | https://github.com/peerigon/markdown-loader | 将Markdown文件转换成HTML |
1.3 转换脚本语言类Loader
此类Loader是前端工程化的核心，负责将高级脚本语言/新版本JS转换为浏览器兼容的JavaScript：
| Loader名称 | 仓库地址 | 核心功能 |
|---|---|---|
| babel-loader | https://github.com/babel/babel-loader | 将ES6转换成ES5 |
| ts-loader | https://github.com/TypeStrong/ts-loader | 将TypeScript转换成JavaScript |
| awesome-typescript-loader | https://github.com/s-panferov/awesome-typescript-loader | 将TypeScript转换成JavaScript，性能优于ts-loader |
| coffee-loader | https://github.com/webpack-contrib/coffee-loader | 将CoffeeScript转换成JavaScript |
1.4 转换样式文件类Loader
此类Loader覆盖CSS及各类预处理器的加载、转换与注入，是样式模块化的核心：
| Loader名称 | 仓库地址 | 核心功能 |
|---|---|---|
| css-loader | https://github.com/webpack-contrib/css-loader | 加载CSS，支持模块化、压缩、文件导入等特性 |
| style-loader | https://github.com/webpack-contrib/style-loader | 将CSS代码注入JavaScript中，通过DOM操作加载CSS |
| sass-loader | https://github.com/webpack-contrib/sass-loader | 将SCSS/SASS代码转换成CSS |
| postcss-loader | https://github.com/postcss/postcss-loader | 扩展CSS语法，支持下一代CSS特性 |
| less-loader | https://github.com/webpack-contrib/less-loader | 将Less代码转换成CSS代码 |
| stylus-loader | https://github.com/shama/stylus-loader | 将Stylus代码转换成CSS代码 |
1.5 检查代码类Loader
此类Loader集成代码校验、测试用例加载及覆盖率统计，保障代码质量：
| Loader名称 | 仓库地址 | 核心功能 |
|---|---|---|
| eslint-loader | https://github.com/MoOx/eslint-loader | 通过ESLint检查JavaScript代码 |
| tslint-loader | https://github.com/wbuchwalter/tslint-loader | 通过TSLint检查TypeScript代码 |
| mocha-loader | https://github.com/webpack-contrib/mocha-loader | 加载Mocha测试用例的代码 |
| coverjs-loader | https://github.com/webpack-contrib/coverjs-loader | 计算测试的覆盖率 |
1.6 其他功能类Loader
此类Loader覆盖框架适配、国际化、按需加载等特殊场景需求：
| Loader名称 | 仓库地址 | 核心功能 |
|---|---|---|
| vue-loader | https://github.com/vuejs/vue-loader | 加载Vue.js单文件组件 |
| i18n-loader | https://github.com/webpack-contrib/i18n-loader | 加载多语言版本，支持国际化 |
| ignore-loader | https://github.com/cherrry/ignore-loader | 忽略部分文件的加载 |
| ui-component-loader | https://github.com/gwuhaolin/ui-component-loader | 按需加载UI组件库（如antd），减少打包体积 |
模块小结：本模块完整汇总了Webpack六大类常用Loader，覆盖文件加载、模版编译、脚本转换、样式处理、代码检查及特殊场景适配，每个Loader均标注了核心功能与仓库地址，可根据开发需求快速选型。
二、常用Plugin全汇总
Plugin是Webpack实现构建流程优化、行为修改的核心扩展，以下是三大类核心Plugin的完整汇总，覆盖构建行为调整、性能优化及特殊功能扩展：
2.1 用于修改构建行为的Plugin
此类Plugin主要调整Webpack的默认构建行为，适配定制化的构建需求：
| Plugin名称 | 仓库/文档地址 | 核心功能 |
|---|---|---|
| define-plugin | https://webpack.js.org/plugins/define-plugin/ | 定义构建时的环境变量 |
| context-replacement-plugin | https://webpack.js.org/plugins/context-replacement-plugin/ | 修改require语句寻找文件时的默认行为 |
| ignore-plugin | https://webpack.js.org/plugins/ignore-plugin/ | 忽略指定文件的打包 |
2.2 用于构建优化的Plugin
此类Plugin是提升构建速度、优化输出产物的核心，也是性能调优的重点：
| Plugin名称 | 仓库/文档地址 | 核心功能 |
|---|---|---|
| commons-chunk-plugin | https://webpack.js.org/plugins/commons-chunk-plugin/ | 提取多入口文件的公共代码，减少重复打包 |
| extract-text-webpack-plugin | https://github.com/webpack-contrib/extract-text-webpack-plugin | 提取JavaScript中的CSS代码到单独文件 |
| prepack-webpack-plugin | https://github.com/gajus/prepack-webpack-plugin | 通过Prepack优化输出JS代码的运行性能 |
| uglifyjs-webpack-plugin | https://github.com/webpack-contrib/uglifyjs-webpack-plugin | 通过UglifyES压缩ES6代码 |
| webpack-parallel-uglify-plugin | https://github.com/gdborton/webpack-parallel-uglify-plugin | 多进程执行UglifyJS压缩，提升构建速度 |
| imagemin-webpack-plugin | https://www.npmjs.com/package/imagemin-webpack-plugin | 压缩打包后的图片文件 |
| module-concatenation-plugin | https://webpack.js.org/plugins/module-concatenation-plugin/ | 开启Webpack Scope Hoisting功能，优化模块打包结构 |
| dll-plugin | https://webpack.js.org/plugins/dll-plugin/ | 借鉴DDL思想，大幅度提升重复构建的速度 |
| hot-module-replacement-plugin | https://webpack.js.org/plugins/hot-module-replacement-plugin/ | 开启模块热替换（HMR）功能，提升开发体验 |
2.3 其他功能类Plugin
此类Plugin覆盖离线缓存、样式检查、国际化、HTML输出等特殊场景：
| Plugin名称 | 仓库/文档地址 | 核心功能 |
|---|---|---|
| serviceworker-webpack-plugin | https://github.com/oliviertassinari/serviceworker-webpack-plugin | 为网页应用增加离线缓存功能 |
| stylelint-webpack-plugin | https://github.com/JaKXz/stylelint-webpack-plugin | 集成stylelint到构建流程，检查样式代码 |
| i18n-webpack-plugin | https://github.com/webpack-contrib/i18n-webpack-plugin | 使网页应用支持国际化 |
| provide-plugin | https://webpack.js.org/plugins/provide-plugin/ | 从全局变量中加载模块，无需手动导入 |
| web-webpack-plugin | https://github.com/gwuhaolin/web-webpack-plugin | 为单页应用输出HTML，功能优于html-webpack-plugin |
模块小结：本模块汇总了Webpack三大类核心Plugin，覆盖构建行为修改、性能优化及特殊功能扩展，每个Plugin标注了核心作用与官方/仓库地址，是构建流程优化、产物调优的核心参考。
三、Webpack优质学习资源
除了书籍学习外，以下官方及社区资源可帮助你系统化掌握Webpack，覆盖入门、进阶、实战全阶段：
| 资源名称 | 地址 | 核心价值 |
|---|---|---|
| Webpack官网 | https://webpack.js.org | 官方权威文档，涵盖入门教程、完整API说明 |
| Webpack中文文档 | https://doc.webpack-china.org/ | 官方文档的中文翻译版，降低语言门槛 |
| Webpack官方博客 | https://medium.com/webpack | 发布Webpack最新特性、未来规划及核心解读 |
| SurviveJS-Webpack | https://survivejs.com/webpack/ | 从入门到精通的英文电子书，覆盖实战与原理 |
| webpack-examples | https://github.com/webpack/webpack/tree/master/examples | 官方案例集合，通过示例快速上手各类配置 |
| webpack-demos | https://github.com/ruanyf/webpack-demos | 阮一峰整理的实战案例，适配新手入门 |
| awesome-webpack | https://github.com/webpack-contrib/awesome-webpack | Webpack优秀周边生态集合，覆盖插件、工具、教程 |
| awesome-webpack-cn | https://github.com/webpack-china/awesome-webpack-cn | 优质的Webpack中文文章汇总，适配中文开发者 |
模块小结：本模块汇总了8类Webpack优质学习资源，涵盖官方文档、社区电子书、实战案例、生态集合等，可根据自身阶段（入门/进阶）选择适配的资源，构建系统化的学习路径。
本篇核心知识点速记
- Loader是Webpack处理非JS文件的核心，六大类Loader覆盖文件加载、模版编译、脚本转换、样式处理、代码检查、特殊场景适配，可根据文件类型/处理需求精准选型；
- Plugin是Webpack扩展构建能力的核心，三大类Plugin聚焦构建行为修改、性能优化、特殊功能扩展，其中优化类Plugin是提升构建速度、产物质量的关键；
- 常用Loader中，babel-loader（ES6转ES5）、css-loader+style-loader（样式处理）、ts-loader（TS转JS）是前端工程化的基础标配；
- 常用Plugin中，commons-chunk-plugin（提取公共代码）、uglifyjs-webpack-plugin（代码压缩）、dll-plugin（提升构建速度）是性能优化的核心工具；
- Webpack学习资源优先选择官方文档（入门）+ 官方案例（实战）+ 社区生态集合（进阶），可高效构建知识体系。