webpack中plugin和loader的区别

这是 Webpack 面试**最高频、最核心**的问题，我用**最直白、最好记**的方式给你讲清楚，**一看就懂、一背就会**。 # 一句话总结区别 - **Loader：文件转换器**（**运行在打包文件之前**） - **Plugin：功能扩展器**（**运行在整个打包周期**） --- # 一、核心区别（表格版，最好记） | 对比项 | **Loader** | **Plugin** | |--------|------------|------------| | **作用** | 处理**非 JavaScript 文件**（css、图片、ts、vue...） | 做**Loader 做不了的事**（打包优化、资源管理、注入环境变量） | | **本质** | 一个**函数** | 一个**带有 apply 方法的类/对象** | | **运行时机** | **打包文件阶段**（解析模块时） | **整个编译生命周期**（从开始到结束都能工作） | | **配置位置** | `module.rules` 里 | `plugins` 数组里 | | **特点** | 链式调用，**只负责文件转换** | 事件钩子，**能做任何事** | --- # 二、详细解释（超通俗） ## 1. Loader 是什么？ Webpack **只认识 JS 和 JSON**，其他文件它看不懂。 **Loader 就是"翻译官"**，把**非 JS 文件 → 翻译成 Webpack 能识别的 JS 模块**。 ### 例子 - `css-loader`：把 CSS 变成 JS 字符串 - `babel-loader`：把 ES6+ → ES5 - `ts-loader`：把 TypeScript → JS - `file-loader`：处理图片、字体 ### 配置写法 ```js module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } ``` --- ## 2. Plugin 是什么？ Plugin 是**功能插件**，不关心文件内容，而是**控制整个打包流程**。 它能做： - 压缩代码（`TerserPlugin`） - 抽离 CSS（`MiniCssExtractPlugin`） - 生成 HTML（`HtmlWebpackPlugin`） - 清空 dist 目录（`CleanWebpackPlugin`） - 定义环境变量（`DefinePlugin`） ### 配置写法 ```js plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new MiniCssExtractPlugin() ] ``` --- # 三、**加载时机区别（最重要！面试必问）** ## 1. Loader 执行时机：**模块解析阶段（文件被加载时）** Webpack 遇到**import/require**一个非 JS 文件时 → 立刻用对应的 Loader 处理 → 处理完再继续打包 一句话： **Loader 在打包文件的过程中，遇到文件就执行。** ## 2. Plugin 执行时机：**整个编译生命周期（从开始到结束）** Webpack 会广播很多事件钩子，比如： - 编译开始 - 生成 chunk - 优化代码 - 输出文件 - 编译结束 Plugin 监听这些钩子，在**合适的时间点做自己的事**。 一句话： **Plugin 贯穿整个打包过程，在不同生命周期执行不同任务。** --- # 四、最经典的一句话总结（背会就能面试） ## Loader： **在打包构建开始前，用来把非 JS 文件转成 JS，让 Webpack 能识别。** ## Plugin： **在整个打包生命周期中监听事件，做打包优化、资源管理、环境注入等扩展功能。** --- # 五、最简单记忆法 - **Loader：管文件翻译（前置）** - **Plugin：管流程控制（全程）** --- ### 总结 1. **Loader**：文件转换器，**运行在模块解析阶段** 2. **Plugin**：功能扩展器，**运行在整个编译生命周期** 3. **Loader 处理文件，Plugin 处理工程** 需要我给你画一张 **Webpack 打包生命周期 + Loader/Plugin 执行顺序图** 吗？一看就彻底通透！