Webpack 中的 Loader 和 Plugin 全面详解-CSDN博客

本文链接：https://blog.csdn.net/Jinxiansen0211/article/details/148994873

🎯 Webpack 中的 Loader 和 Plugin 全面详解

📌 整理不易，记得收藏、点赞再加关注，后续还会更新更多实战文档！

Webpack 是现代前端构建体系的核心工具，其中 Loader 和 Plugin 是其功能扩展的两大支柱。它们虽然常一起出现，但本质和作用完全不同。

本文将全面对比二者的 定义、作用、使用场景、生命周期与示例，帮你彻底搞清 Loader 和 Plugin 的区别与使用方法。

📦 一、Loader 是什么？

🧠 定义：

Loader 用于 转换模块的源码内容，本质上是一个函数，接收源文件并返回转换后的结果。

🛠 主要作用：

加载并处理 非 JavaScript 模块，如 .vue、.ts、.scss、.png 等
实现模块内容的预处理（编译、压缩、转换等）

🔁 使用流程：

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader'],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ]
  }
}

📌 多个 Loader 会从右到左（后向前）依次执行。

🧪 常见 Loader：

Loader	功能说明
`babel-loader`	将 ES6+ 转为 ES5
`ts-loader`	处理 TypeScript
`vue-loader`	处理 `.vue` 文件
`file-loader`	输出文件并返回路径
`url-loader`	小图转 base64，大图 file
`css-loader`	加载 `.css` 文件
`style-loader`	将 CSS 注入 `<style>` 标签

🔌 二、Plugin 是什么？

🧠 定义：

Plugin 是一个具有 apply 方法的类，用于扩展 Webpack 的能力，可在构建的不同阶段执行操作。

🛠 主要作用：

执行更复杂的构建逻辑（如打包优化、资源注入、文件生成）
可以访问 Webpack 编译生命周期的钩子（如 emit、done、compile）

🧰 使用方式：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: '我的应用',
      template: './public/index.html'
    })
  ]
}

🧪 常见 Plugin：

Plugin	功能说明
`HtmlWebpackPlugin`	生成 HTML 文件并自动注入资源
`DefinePlugin`	定义环境变量
`MiniCssExtractPlugin`	抽离 CSS 文件
`CopyWebpackPlugin`	复制静态资源
`CleanWebpackPlugin`	构建前清除旧文件
`BundleAnalyzerPlugin`	打包体积可视化分析

🔍 三、Loader vs Plugin 对比总结

对比项	Loader	Plugin
本质	函数（处理模块源码）	类（处理构建生命周期）
作用时机	模块加载阶段	编译/打包等各生命周期阶段
功能	转换文件内容（如 `.vue` 转 JS）	添加功能（注入 HTML、压缩、清理等）
应用方式	`module.rules`	`plugins` 配置项中实例化
多次执行顺序	多个 Loader 从右到左依次执行	Plugin 执行顺序根据 Webpack 钩子顺序
能力范围	局限于模块处理	可以控制打包流程全局

✍️ 四、实战示例对比

✅ 示例 1：Loader 示例（编译 `.scss`）

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

作用：

sass-loader 把 SCSS 转为 CSS
css-loader 解析 @import 和 url()
style-loader 插入 HTML 中的 <style>

✅ 示例 2：Plugin 示例（生成 HTML 文件）

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({
    title: '我的 App',
    template: './public/index.html'
  })
]