播面

在 Webpack 中，Loader（加载器） 是一个非常核心的概念。

简单来说，Loader 就是一个“转换器”或“翻译官”。它的主要作用是将非 JavaScript 文件转换/编译为 Webpack 能够识别和处理的有效 JavaScript 模块。

一、 为什么需要 Loader？

Webpack 本身是一个打包工具，但它默认只认识 JavaScript 和 JSON 文件。

但在现代前端开发中，我们的项目包含各种各样的资源：

• 样式文件：.css, .less, .scss
• 脚本扩展：.ts (TypeScript), JSX/TSX (React)
• 静态资源：.png, .jpg, .svg, 字体文件
• 模板文件：.vue (Vue 单文件组件)

如果直接在 JS 中 import './style.css'，Webpack 在不借助 Loader 的情况下会直接报错，因为它看不懂 CSS 代码。Loader 的出现就是为了解决“Webpack 看不懂其他文件”的问题。

二、 Loader 的主要作用

1. 语法编译与转换（Transpilation）：

   • 将 TypeScript 编译为 JavaScript（如 ts-loader）。
   • 将 ES6+ 的高级 JS 语法编译为 ES5，以兼容老旧浏览器（如 babel-loader）。
   • 将 React 的 JSX 语法转换为普通 JS 函数。

2. 样式处理（Style Processing）：

   • 将 SASS/LESS 编译为普通 CSS（如 sass-loader, less-loader）。
   • 处理 CSS 中的 @import 和 url()（如 css-loader）。
   • 将 CSS 样式以 <style> 标签的形式插入到 HTML 文档中（如 style-loader）。

3. 文件与资源转换（Asset Handling）：

   • 将图片或字体文件转换为 Base64 编码内嵌到 JS 中，或者移动到输出目录并返回 URL（如 file-loader, url-loader，注意：Webpack 5 已内置 Asset Modules 替代它们）。

4. 特定框架支持：

   • 解析 Vue 的 .vue 单文件组件（如 vue-loader）。

三、 Loader 的核心特性

1. 链式调用（Chainable）：

   • Loader 可以链式组合使用。一个 Loader 的输出会作为下一个 Loader 的输入。
   • 执行顺序是从右到左（或从下到上）。
   • 示例： 处理 SCSS 文件时：
     javascript

     use: ['style-loader', 'css-loader', 'sass-loader']

     执行顺序为：sass-loader（将 SCSS 转为 CSS） ➔ css-loader（解析 CSS 模块） ➔ style-loader（将 CSS 挂载到 DOM 上）。

2. 运行在 Build 阶段： Loader 在 Webpack 构建依赖图谱、打包文件的过程中（即生成 bundle 之前）对单个文件进行处理。

四、 如何在 Webpack 中配置 Loader

在 webpack.config.js 的 module.rules 中配置 Loader：

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配以 .css 结尾的文件
        use: ['style-loader', 'css-loader'] // 使用对应的 Loader
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader', // 单个 Loader 的详细配置
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

总结：Loader 与 Plugin（插件）的区别

很多人容易混淆 Loader 和 Plugin，它们的主要区别是：

• Loader（加载器）： 专注于文件转换。只针对特定类型的文件进行翻译（如 CSS -> JS，TS -> JS）。它作用于单个文件层面。
• Plugin（插件）： 专注于打包优化和全生命周期的功能扩展。比如压缩代码（TerserPlugin）、提取 CSS 为单独文件（MiniCssExtractPlugin）、自动生成 HTML（HtmlWebpackPlugin）。它作用于整个构建过程和最终的 Bundle 层面。