关于webpack你要知道的

webpack

loader 和 plugin

// Loader
module.exports = function source(source) {
  // 将字符串替换为其长度
  const length = source.length;
  return `export default ${length};`;
};

// Plugin
class SimplePlugin {
  apply(compiler) {
    // compiler 是 Webpack 编译器的实例
    compiler.hooks.done.tap('SimplePlugin', (compilation) => {
      // compilation 是当前的构建过程
      console.log('Webpack build completed.');
      // 你可以在这里添加更多的逻辑，比如修改 compilation 的输出
    });
  }
}

module.exports = SimplePlugin;

plugin是依赖tapable库实现的

tapable库是一个发布订阅模式的实现

compiler 和 compilation

在 Webpack 中，compiler 和 compilation 是两个核心概念，它们是 Webpack 插件系统的基础。

Compiler

compiler 是 Webpack 编译器的实例，它负责整个编译过程。当你运行 webpack 命令时，会创建一个 compiler 实例，它读取配置文件（如 webpack.config.js），然后开始编译过程。

compiler 对象提供了许多钩子（hooks），这些钩子允许插件在编译生命周期的不同阶段介入并执行自定义逻辑。例如，你可以在代码解析之前、模块创建之后或资源生成之前等时机执行代码。

compiler 钩子的一些常见用途包括：

• 添加新的模块类型。
• 修改现有模块的内容。
• 访问和修改最终的输出资源。

Compilation

compilation 对象代表了一次编译过程。每当 compiler 开始编译时，它都会创建一个新的 compilation 对象。这个对象包含了当前编译过程中的所有信息，如输入的模块、生成的资产（assets）、编译生成的错误和警告等。

compilation 对象也提供了许多钩子，这些钩子允许插件在编译的不同阶段介入。例如，你可以在某个模块被密封（seal）之前、某个资产被添加到输出之前或编译结束后等时机执行代码。

compilation 钩子的一些常见用途包括：

• 记录或修改模块的内容。
• 添加、删除或修改生成的资产。
• 报告编译过程中的错误或警告。

理解它们的关系

• compiler 是整个编译过程的上下文，它包含了编译过程中的配置信息和全局状态。
• compilation 是单次编译的上下文，它包含了当前编译过程中的所有细节和状态。

每当你运行 Webpack 时，compiler 会根据配置文件创建一个 compilation 对象，然后开始编译过程。在这个过程中，compilation 对象会被填充模块、生成资产等信息。插件可以利用这些对象提供的钩子来介入和修改编译过程。

示例

假设你想要创建一个插件，该插件在每次编译结束时打印一条消息：

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyPlugin', (stats) => {
      console.log('Compilation is finished.');
      // stats 对象包含了编译的结果信息
    });
  }
}

module.exports = MyPlugin;

在这个例子中，apply 方法中的 compiler.hooks.done 钩子用于监听编译结束事件。当编译完成时，tap 方法会调用，并且你可以访问 stats 对象，它包含了编译的结果信息。

总结来说，compiler 和 compilation 是 Webpack 插件系统的核心，它们提供了丰富的钩子，允许开发者在编译过程中的关键时刻执行自定义逻辑。