说说 webpack 中常见的 Loader？解决了什么问题？

问题解析

这道题考察对 Webpack Loader 机制的理解。面试官希望看到你能解释清楚：Loader 是什么、常见 Loader 有哪些、它们各自的作用、Loader 的执行顺序。

核心概念

什么是 Loader

Loader 是 Webpack 的核心概念之一，它是一个函数，用于对模块的源代码进行转换。Webpack 本身只理解 JavaScript 和 JSON，Loader 让 Webpack 能够处理其他类型的文件，并将它们转换为有效的模块。

┌─────────────────────────────────────────────────────────────────┐
│                        Loader 工作流程                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   输入文件          Loader 转换            输出模块               │
│   ┌────────┐      ┌──────────────┐      ┌──────────────┐       │
│   │ .scss  │  --> │ sass-loader  │  --> │              │       │
│   │        │      │ css-loader   │  --> │  JavaScript  │       │
│   │        │      │ style-loader │  --> │  模块代码     │       │
│   └────────┘      └──────────────┘      └──────────────┘       │
│                                                                  │
│   功能：将非 JS 资源转换为 Webpack 可识别的模块                     │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Loader 的本质

// Loader 本质上是一个函数
// 接收源文件内容，返回转换后的内容

module.exports = function loader(source) {
  // source: 文件源代码（字符串或 Buffer）

  // 执行转换...
  const result = transform(source);

  // 返回转换后的内容
  return result;

  // 或者使用 callback 返回更多信息
  this.callback(null, result, sourceMap, meta);
};

详细解答

常见 Loader 分类

1. 样式处理 Loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',   // 3. 将 CSS 注入 DOM
          'css-loader',     // 2. 解析 CSS 中的 @import 和 url()
          'sass-loader'     // 1. 将 Sass 编译为 CSS
        ]
      }
    ]
  }
};

Loader	作用	示例
style-loader	将 CSS 注入 DOM 的 style 标签	开发环境快速预览样式
css-loader	解析 CSS 文件，处理 @import 和 url()	使 CSS 可以作为模块导入
sass-loader	将 Sass/SCSS 编译为 CSS	使用 SCSS 语法编写样式
less-loader	将 Less 编译为 CSS	使用 Less 语法编写样式
postcss-loader	使用 PostCSS 处理 CSS	自动添加浏览器前缀、CSS 压缩
mini-css-extract-plugin	提取 CSS 为单独文件（生产环境）	替代 style-loader

2. JavaScript 转译 Loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      },
      {
        test: /\.ts$/,
        use: 'ts-loader',  // 或 'babel-loader' + @babel/preset-typescript
        exclude: /node_modules/
      }
    ]
  }
};

Loader	作用	示例
babel-loader	使用 Babel 转译 ES6+/JSX	兼容旧浏览器
ts-loader	编译 TypeScript	TypeScript 项目
coffee-loader	编译 CoffeeScript	CoffeeScript 项目
eslint-loader	代码检查	开发时代码规范检查

3. 资源文件 Loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192,  // 8KB 以下的图片转为 base64
            name: 'images/[name].[hash:8].[ext]'
          }
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: 'file-loader'
      }
    ]
  }
};

Loader	作用	示例
file-loader	处理文件导入，返回文件 URL	字体、图片等静态资源
url-loader	小文件转为 base64，大文件使用 file-loader	减少 HTTP 请求
raw-loader	将文件作为字符串导入	导入 SVG 作为字符串处理
svg-inline-loader	将 SVG 作为内联元素	SVG 图标内联

4. 模板和框架 Loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.html$/,
        use: 'html-loader'  // 处理 HTML 中的资源引用
      },
      {
        test: /\.pug$/,
        use: 'pug-loader'  // 编译 Pug 模板
      }
    ]
  }
};

Loader	作用	示例
vue-loader	编译 Vue 单文件组件	Vue 项目
html-loader	处理 HTML 文件，解析其中的资源引用	处理 img src
pug-loader	编译 Pug/Jade 模板	使用 Pug 语法
handlebars-loader	编译 Handlebars 模板	Handlebars 模板引擎
markdown-loader	编译 Markdown	文档站点

Loader 执行顺序

// 执行顺序：从右到左，从下到上

// 方式一：数组形式（推荐）
use: ['style-loader', 'css-loader', 'sass-loader']
// 执行顺序：sass-loader -> css-loader -> style-loader

// 方式二：对象形式（可传参数）
use: [
  { loader: 'style-loader' },
  {
    loader: 'css-loader',
    options: { modules: true }  // CSS Modules
  },
  { loader: 'sass-loader' }
]

// 方式三：内联（不推荐）
import Styles from 'style-loader!css-loader!sass-loader!./styles.scss';

Loader 解决的核心问题

1. 让 Webpack 理解非 JS 资源

// 没有 Loader，Webpack 无法处理这些导入
import './styles.css';     // Error: 无法解析 CSS
import logo from './logo.png';  // Error: 无法解析图片
import template from './app.vue';  // Error: 无法解析 Vue 文件

// 有了 Loader，一切都可以是模块
import './styles.css';     // OK: css-loader + style-loader
import logo from './logo.png';  // OK: file-loader
import App from './app.vue';    // OK: vue-loader

2. 代码转译和兼容性处理

// 源代码（ES6+）
const sum = (a, b) => a + b;
class Person {
  #privateField = 'private';
}

// babel-loader 转译后（ES5）
"use strict";
function _classCallCheck(instance, Constructor) { /* ... */ }
var sum = function sum(a, b) {
  return a + b;
};
var Person = function Person() {
  _classCallCheck(this, Person);
  this["privateField"] = 'private';
};

3. 资源优化

// url-loader 将小图片转为 base64，减少 HTTP 请求
// 8KB 以下的图片直接内联
import smallIcon from './small-icon.png';  // data:image/png;base64,...
import largeImage from './large-image.png';  // /images/large-image.a3f2b1c.png

深入理解

Loader 的 pitch 阶段

// Loader 有两个执行阶段：pitch 和 normal

module.exports = function loader(source) {
  // normal 阶段：处理源代码
  return source.replace(/console\.log/g, '');
};

module.exports.pitch = function(remainingRequest, precedingRequest, data) {
  // pitch 阶段：在 loader 执行前调用
  // 可以在这里做一些准备工作或短路操作
  console.log('pitch 执行');

  // 返回非 undefined 会短路，跳过后续 loader
  // return 'module.exports = "short-circuited";';
};

// 执行顺序：
// loaderA.pitch -> loaderB.pitch -> loaderC.pitch
// loaderC -> loaderB -> loaderA

编写自定义 Loader

// 1. 创建 loader 文件：loaders/replace-loader.js
module.exports = function(source) {
  // 获取 loader 选项
  const options = this.getOptions();
  const { search, replace } = options;

  // 执行替换
  const result = source.replace(
    new RegExp(search, 'g'),
    replace
  );

  // 返回结果
  return result;
};

// 2. 配置使用
module.exports = {
  resolveLoader: {
    alias: {
      'replace-loader': path.resolve(__dirname, 'loaders/replace-loader.js')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'replace-loader',
          options: {
            search: 'process.env.NODE_ENV',
            replace: '"production"'
          }
        }
      }
    ]
  }
};

异步 Loader

// 异步 loader 使用 this.async()
module.exports = function(source) {
  const callback = this.async();

  // 异步操作
  someAsyncOperation(source, (err, result) => {
    if (err) return callback(err);
    callback(null, result);
  });
};

Loader 上下文（this）

module.exports = function(source) {
  // this 对象提供的常用方法
  this.cacheable(true);           // 开启缓存
  this.addDependency(filePath);   // 添加依赖，文件变化时重新编译
  this.emitFile(name, content);   // 输出文件
  this.getOptions();              // 获取 loader 选项
  this.callback(err, content, sourceMap, meta);  // 返回多个结果
  this.async();                   // 转为异步模式

  return source;
};

最佳实践

1. 合理配置 Loader 范围

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 只处理 src 目录，排除 node_modules
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

2. 区分开发和生产环境

// webpack.common.js
const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};

3. 使用 thread-loader 加速

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'cache-loader',      // 缓存结果
          {
            loader: 'thread-loader',  // 多线程
            options: {
              workers: 2
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
};

4. 图片资源优化配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset',  // Webpack 5 内置资源模块
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024  // 8KB
          }
        },
        generator: {
          filename: 'images/[name].[hash:8][ext]'
        }
      }
    ]
  }
};

面试要点

回答思路

1. 定义：Loader 是对模块源代码进行转换的函数，让 Webpack 能处理非 JS 资源
2. 常见 Loader：
   • 样式：style-loader、css-loader、sass-loader、postcss-loader
   • JS：babel-loader、ts-loader
   • 资源：file-loader、url-loader
   • 框架：vue-loader、html-loader
3. 执行顺序：从右到左，从下到上（数组形式）
4. 解决的问题：
   • 让 Webpack 理解各种资源类型
   • 代码转译和兼容性处理
   • 资源优化（base64 内联等）

常见追问

Q: Loader 和 Plugin 有什么区别？

A: Loader 是文件转换器，运行在打包文件加载时，处理单个文件；Plugin 在编译整个生命周期都起作用，功能更强大，可以访问编译器对象。

Q: 为什么 Loader 是从右到左执行？

A: 这是 Webpack 的设计，类似函数组合 compose(f, g, h) = f(g(h(x)))。这样设计符合管道思想，数据从右向左流动，每个 Loader 处理完传递给下一个。

Q: url-loader 和 file-loader 的区别？

A: url-loader 在文件小于 limit 时返回 base64，大于 limit 时调用 file-loader；file-loader 总是返回文件 URL。Webpack 5 中推荐使用内置的 asset module 替代它们。

Q: 如何实现一个 Loader？

A: 导出一个函数，接收 source 参数，返回转换后的内容。可以使用 this.callback 返回 sourceMap，使用 this.async 处理异步操作。

Q: css-loader 和 style-loader 可以互换顺序吗？

A: 不可以。必须先使用 css-loader 解析 CSS 文件，再用 style-loader 注入 DOM。顺序错误会导致报错。

一句话总结

Loader 是 Webpack 的文件转换器，它将非 JavaScript 资源（CSS、图片、TypeScript 等）转换为 Webpack 可识别的模块，使"万物皆可模块"成为可能，执行顺序为从右到左的链式调用。