Webpack 的 Loader 和 Plugin
Webpack 中 Loader 与 Plugin 的职责分工，以及它们分别解决什么问题。
#tech / dev / frontend / eng
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: 前端工程化 MOC
- 相关概念: bundling-tools, webpack-build-process, vite-moc
- 面试问法: loader-vs-plugin-interview-question
Webpack 的 Loader 和 Plugin
在 Webpack 里，Loader 和 Plugin 经常一起出现，但它们解决的问题不是一个层级。
一句话定义
Loader负责把某类模块内容转换成 Webpack 能继续处理的结果Plugin负责介入整个构建流程，在更高层扩展能力
Loader 在做什么
Webpack 默认只理解 JavaScript 和 JSON。遇到 TypeScript、CSS、Less、图片等资源时，通常需要 Loader 做转换。
例如：
ts-loader把 TypeScript 转成 JavaScriptcss-loader解析 CSS 依赖babel-loader做语法转译
它更像“模块级转换器”。
Plugin 在做什么
Plugin 不只是转一个文件，而是能参与整个构建生命周期。
例如：
HtmlWebpackPlugin生成 HTMLDefinePlugin注入全局常量MiniCssExtractPlugin抽离 CSS
它更像“构建流程扩展器”。
最核心的区分方式
- 处理某一类文件怎么变：先想到
Loader - 要不要扩展构建阶段能力：先想到
Plugin
最短记忆方式
Loader 管模块转换，Plugin 管构建扩展。
面试要点
来自 loader-vs-plugin-interview-question 的面试视角整理。
一句话回答
Loader 主要解决“某类文件怎么转成可处理模块”的问题，Plugin 主要解决“如何扩展整个构建流程能力”的问题。
最稳的回答主线
Loader面向模块内容转换Plugin面向构建生命周期扩展- 遇到 CSS、TS、图片这类资源转换，通常先想到
Loader - 遇到生成 HTML、注入变量、抽离资源这类需求，通常先想到
Plugin
最短记忆方式
Loader 管文件怎么变，Plugin 管流程怎么扩。