Webpack 中的 Loader 和 Plugin 全面详解

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 注入