Skip to content

Webpack Loader

什么是 Webpack Loader?

Loader(加载器) 是 Webpack 处理非 JavaScript 文件 的工具,将文件转换为 Webpack 能识别的模块(如将 CSS 转换为 JavaScript 字符串,图片转为 Base64 或文件路径)。

本质是一个函数(或模块),接收源文件内容,返回处理后的结果。

js
// 示例:一个简单的 Loader,将内容转为大写 
module.exports = function(source) {
  return source.toUpperCase();
};

Loader 核心用途

  1. 转译代码

    • BabelES6+ 代码转为 ES5
  2. 处理静态资源

    • CSS、图片、字体等转为 JavaScript 可引用的形式。
  3. 代码校验与格式化

    • ESLint 检查代码规范。
  4. 模板处理

    • HTML 模板中插入动态变量。

常用 Loader 分类与示例

类型
常用 Loader
用途配置示例
JavaScript 转译babel-loader转换 ES6+TypeScript{ test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ }
样式处理style-loader +
css-loader
CSS 注入 JavaScript,解析 @importurl()use: ['style-loader', 'css-loader']
预处理器sass-loader /
less-loader
编译 Sass/LessCSSuse: ['style-loader', 'css-loader', 'sass-loader']
文件处理file-loader /
url-loader
处理图片、字体,url-loader 支持 Base64test: /\.png$/, use: [ { loader: 'file-loader'} ]
代码校验eslint-loader代码规范检查{ test: /\.js$/, use: ['eslint-loader'], enforce: 'pre' }
模板处理html-loader处理 HTML 中的资源路径(如 <img src>{ test: /\.html$/, use: 'html-loader' }

如何配置 Loader?

webpack.config.jsmodule.rules 中定义规则:

js
module.exports = {
  module: {
    rules: [
      { 
        test : /\.css$/, // 匹配文件类型 
        use: [ // 使用的 Loader 数组 
          'style-loader', // 顺序从后往前执行(或从下到上) 
          { 
            loader: 'css-loader', 
            options: { modules : true } // 配置选项 
          }
        ], 
        exclude: /node_modules/ // 排除目录 
      }
    ]
  }
};

关键属性

  • test:正则匹配文件扩展名(如 /\.js$/ );
  • use:指定 Loader,支持字符串或对象形式(可传参);
  • exclude/include:缩小处理范围,提升构建速度;
  • enforce: 'pre':强制在其它 Loader 前执行(如 ESLint)。

Loader 的工作原理

  1. 链式处理

    • Loader 从右到左(或从下到上)依次执行,前一个 Loader 的输出作为下一个的输入。
js
use: [ 'style-loader', 'css-loader' ] // 先执行 css-loader,再 style-loader
  1. 同步与异步

    • 默认同步执行,可通过 this.async() 返回异步回调。
js
module.exports = function(source) {
  const callback = this.async();
  someAsyncTask(source, (err, result) => { 
    callback(err, result);
  });
};
  1. Pitching 阶段

    • Loaderpitch 方法在实际执行前被调用,可用于跳过后续 Loader
js
module.exports.pitch = function(remainingRequest) {
  if (shouldSkip) return 'module.exports = "Skipped";';
};

其他注意点

  1. LoaderPlugin 的区别

    • Loader 处理单个文件Plugin构建流程中扩展功能(如压缩代码)。
  2. 自定义 Loader

    • 可通过 resolveLoader 配置自定义 Loader 路径:
js
resolveLoader: {
  modules: [ 'node_modules', './my-loaders' ]
}
  1. 性能优化

    • 使用 exclude/include 减少不必要的文件处理;
    • 缓存 Loader 结果(如 cache-loaderbabel-loader?cacheDirectory=true );
  2. 兼容性

    • 注意 Loader 版本与 Webpack 的兼容性(如 Webpack5 废弃了 url-loader ,推荐使用 Asset Modules)。

如有转载或 CV 的请标注本站原文地址