Webpack Loader

什么是 Webpack Loader？

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

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

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

Loader 核心用途

1. 转译代码

   • 如 Babel 将 ES6+ 代码转为 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，解析 @import 和 url()	use: ['style-loader', 'css-loader']
预处理器	sass-loader / less-loader	编译 Sass/Less 为 CSS	use: ['style-loader', 'css-loader', 'sass-loader']
文件处理	file-loader / url-loader	处理图片、字体，url-loader 支持 Base64	test: /\.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.js 的 module.rules 中定义规则：

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 的输出作为下一个的输入。

use: [ 'style-loader', 'css-loader' ] // 先执行 css-loader，再 style-loader

2. 同步与异步

   • 默认同步执行，可通过 this.async() 返回异步回调。

module.exports = function(source) {
  const callback = this.async();
  someAsyncTask(source, (err, result) => { 
    callback(err, result);
  });
};

3. Pitching 阶段

   • Loader 的 pitch 方法在实际执行前被调用，可用于跳过后续 Loader。

module.exports.pitch = function(remainingRequest) {
  if (shouldSkip) return 'module.exports = "Skipped";';
};

其他注意点

1. Loader 与 Plugin 的区别

   • Loader 处理单个文件，Plugin 在构建流程中扩展功能（如压缩代码）。

2. 自定义 Loader

   • 可通过 resolveLoader 配置自定义 Loader 路径：

resolveLoader: {
  modules: [ 'node_modules', './my-loaders' ]
}

3. 性能优化

   • 使用 exclude/include 减少不必要的文件处理；
   • 缓存 Loader 结果（如 cache-loader 或 babel-loader?cacheDirectory=true ）；

4. 兼容性

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