《玩转webpack》第七章 原理篇: 编写 Loader 和插件

• 语言: 中文（简体）
• 格式: .pdf
• 来源: github.com/cpselvis

摘要

文档详细讲解了Webpack的Loader和插件的编写方法。内容包括Loader的基本结构、执行顺序、缓存机制以及文件输出方法，还介绍了插件的运行环境、基本结构和使用场景。文档还提供了编写压缩构建资源为ZIP包的插件示例，并涉及Node.js和JSZip工具的使用。

AI总结

《玩转webpack》第七章主要讲解了Webpack的原理篇，重点围绕编写Loader和插件展开。以下是文档的核心内容总结：

### 1. **Loader的基本结构**
- Loader是一个导出为函数的JavaScript模块。
- 最简单的Loader代码如下：

  module.exports = function(source) {
    return source;
  };

### 2. **多Loader的执行顺序**
- 多个Loader会按从后到前的顺序串行执行。
- 在Webpack配置中，Loader的执行顺序由`use`数组的顺序决定。

### 3. **Loader的缓存机制**
- Webpack默认开启Loader缓存。
- 缓存条件：Loader的结果在相同的输入下有确定的输出。
- 可通过`this.cacheable(false)`关闭缓存。

### 4. **Loader的文件输出**
- Loader可以通过`this.emitFile`方法输出文件。
- 文件路径可以通过`loaderUtils.interpolateName`生成，例如：

  const url = loaderUtils.interpolateName(this, "[hash].[ext]", { content });

### 5. **插件的基本结构**
- 插件没有独立运行环境，只能在Webpack中运行。
- 插件的基本结构如下：

  class MyPlugin {
    apply(compiler) {
      compiler.hooks.done.tap('My Plugin', (stats) => {
        console.log('Hello World!');
        // 在构建完成后执行操作
      });
    }
  }
  module.exports = MyPlugin;

### 6. **编写压缩资源为zip包的插件**
- 要求：
- 生成的zip包文件名称可通过插件传入。
- 使用`compiler`对象上的特定hooks进行资源生成。
- 使用`jszip`库实现文件压缩：

  var zip = new JSZip();
  zip.file("Hello.txt", "Hello World\n");
  var img = zip.folder("images");
  img.file("smile.gif", imgData, { base64: true });
  zip.generateAsync({ type: "blob" }).then(function(content) {
    // 保存zip文件
  });

总结：本章主要介绍了Loader和插件的基本概念、编写方法以及实际应用案例，帮助开发者深入理解Webpack的运行机制并掌握自定义构建工具的能力。