webpack 之 Loader 和 Plugin 接收参数对比

在 Webpack 中，Loader 和 Plugin 是两个核心概念，但它们的工作方式和接受的参数有很大区别。以下是它们各自接受的参数及其使用方式：

Loader 接受的参数

Loader 是一个函数，用于转换模块的源代码。它接受以下参数：

1. 源代码参数（source）

Loader 的第一个参数是模块的源代码字符串或 Buffer。

// 同步 Loader
module.exports = function(source) {
  // source 是模块的原始代码
  return source.replace('Hello', 'Hi'); // 简单的字符串替换示例
};

// 异步 Loader
module.exports = function(source) {
  const callback = this.async(); // 获取异步回调
  // 异步处理 source...
  callback(null, processedSource);
};

2. Loader 上下文（this）

Loader 函数的 this 指向一个上下文对象，包含以下常用属性：

• this.query：Loader 的查询参数（如 style-loader?modules）。
• this.resourcePath：当前处理的文件路径。
• this.addDependency(file)：添加额外的依赖文件（触发重新编译）。
• this.emitFile(name, content)：生成文件。
• this.async()：返回异步回调函数（用于异步 Loader）。

3. Loader 配置参数

Loader 的配置参数通常通过 options 对象传递：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // 配置参数
              importLoaders: 1
            }
          }
        ]
      }
    ]
  }
};

Plugin 接受的参数

Plugin 是一个类 或函数，用于在 Webpack 生命周期的特定钩子上执行自定义逻辑。它接受以下参数：

1. 构造函数参数

插件的配置通常通过构造函数传递：

// 自定义插件
class MyPlugin {
  constructor(options) {
    this.options = options; // 接收配置参数
  }

  apply(compiler) {
    // 使用 this.options...
  }
}

// 在 webpack.config.js 中使用
module.exports = {
  plugins: [
    new MyPlugin({
      test: /\.js$/,
      verbose: true
    })
  ]
};

2. Compiler 对象

插件的 apply 方法接收 compiler 对象作为参数，它包含 Webpack 环境的所有配置信息：

class MyPlugin {
  apply(compiler) {
    // compiler 对象包含以下常用属性：
    // - compiler.options：Webpack 配置
    // - compiler.hooks：钩子对象
    // - compiler.inputFileSystem：文件系统操作
  }
}

3. Compilation 对象

在钩子回调中，插件通常会接收 compilation 对象，它代表一次编译的上下文：

class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      // compilation 对象包含以下常用属性：
      // - compilation.assets：当前编译的所有资源
      // - compilation.modules：当前编译的所有模块
      // - compilation.chunks：当前编译的代码块
    });
  }
}

对比总结

特性	Loader	Plugin
类型	函数	类或函数
主要参数	源代码（source）	Compiler 和 Compilation 对象
配置方式	options 对象或查询字符串	构造函数参数
作用	转换单个模块	干预整个构建过程
示例参数	source, this.query	compiler, compilation

实际应用

• Loader 示例：

  // babel-loader 接收 presets 和 plugins 配置
  {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }

• Plugin 示例：

  // HtmlWebpackPlugin 接收 template 和 filename 配置
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html'
  })

通过合理使用 Loader 和 Plugin 的参数，可以实现各种复杂的构建需求，如代码转换、资源优化、自动化部署等。