loader

约 728 字大约 2 分钟

2026-02-11

如果说 Webpack 是“总调度器”，那 Loader 就是“翻译器”。

浏览器和 Webpack 原生只直接理解 JS/JSON 的一部分能力，而现代项目里的 TS、JSX、Sass、图片都需要先被转换，这正是 Loader 的职责。

Loader 解决了什么问题

典型场景：

.ts、.jsx 无法直接在浏览器执行。
.scss 不是浏览器可识别样式。
图片、字体、文本需要转为可被模块系统消费的形式。

Loader 的价值是把这些输入都转成“Webpack 能继续处理的模块”。

Loader 执行顺序

最容易踩坑的点是顺序：use 数组从右到左执行。

{
  test: /\.s?css$/,
  use: [
    'style-loader', // 最后执行：把 CSS 注入页面
    'css-loader',   // 先执行：解析 CSS 模块
    'sass-loader',  // 最先执行：把 Sass 编译成 CSS
  ],
}

顺序写错会导致“看起来都装了，但就是不生效”。

常见 Loader 组合（含注释）

下面是一份更接近业务项目的规则集合。

// webpack.config.cjs（节选）
const path = require('node:path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?jsx?$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: 'babel-loader', // JS/JSX 语法转换
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader', // 把样式插入 DOM
          'css-loader',   // 解析 @import / url()
          'sass-loader',  // Sass -> CSS
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset', // Webpack5 资源模块
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
      },
      {
        test: /\.txt$/,
        type: 'asset/source', // 文本按字符串导入
      },
    ],
  },
};

Asset Modules 与历史 loader 的关系

Webpack 5 已内置资源模块能力，很多时候不再需要 file-loader / url-loader。

类型	行为	典型用途
`asset/resource`	输出文件并返回 URL	大图片、字体
`asset/inline`	内联为 DataURL	小图标
`asset/source`	以源码字符串导入	文本模板
`asset`	自动选择 inline/resource	通用图片

资源模块选型

自定义 Loader 什么时候需要

你只在“现有生态 Loader 不能满足团队规则”时再写自定义 Loader，比如：

自动注入埋点。
统一替换业务私有语法。
对内部 DSL 做编译。

示例（最小自定义 Loader）：

// loaders/add-banner-loader.cjs
module.exports = function addBannerLoader(source) {
  // 在源码头部加注释，示例用途
  return `/* built by custom loader */\n${source}`;
};

// webpack.config.cjs（节选）
const path = require('node:path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve(__dirname, './loaders/add-banner-loader.cjs'),
          },
        ],
      },
    ],
  },
};

使用注意事项

建议

Loader 命中范围尽量精准（include 优先）。
优先使用成熟 Loader，降低维护成本。
一条规则只做一类事情，便于排错。

常见错误

最佳实践

把 Loader 当作“转换流水线”设计，而不是“临时拼接”。
规则越清晰，后续性能优化越容易。
在评审中明确每个 Loader 的引入收益和维护成本。

基础篇

性能优化篇

基础篇