一、plugin概念

plugin可扩展webpack的功能，加入自定义的构建行为

二、plugin工作原理

webpack就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有依赖关系，只有完成当前处理后才能交给下一个流程去处理。

插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。

webpack通过tapable来组织这条复杂的生产线。webpack在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。webpack事件流机制保证插件的有序性，使得整个系统扩展性很好。

在代码逻辑角度，webpack在编译的过程中，触发一系列tapable钩子，插件就是监听这些钩子，找到自己需要的，往上面挂上自己的任务，也就是注册事件。这样，当webpack构建的时候，插件注册的事件就会随着钩子的触发而执行了。

三、webpack内部的钩子（hooks）

tapable是webpack核心功能库，为webpack提供了统一的插件接口类型定义

tapable暴露了3个方法给插件使用：

1. tap：注册同步钩子和异步钩子
2. tapAsync：回调方式注册异步钩子
3. tapPromise：promise方式注册异步钩子

四、plugin构建对象

1、compiler

compiler对象保存着完整的webpack环境配置，每次启动webpack构建时它都是一个独一无二，仅会创建一次的对象。

这个对象会在首次启动webpack时创建，我们可以通过compiler对象访问webpack的主环境配置，比如loader、plugin等配置信息。

属性：

1. compiler.options：返回本次启动webpack时所有的配置文件，包括但不限于entry、output、loaders、plugin等配置的完整信息
2. compiler.inputFileSystem和compiler.outputFileSystem：可以进行文件操作，相当于fs
3. compiler.hooks：用于注册tapable的不同种类hook，从而在compiler生命周期中植入不同的逻辑

2、compilation

compilation对象代表依次资源的构建，compilation实例能够访问所有的模块和它们的依赖。

一个compilation对象会对构建依赖图中所有模块进行编译，在编译阶段，模块会被加载（load）、封存（seal）、优化（optimize）、分块（chunk）、哈希（hash）和重新创建（restore）。

属性：

1. compilation.modules：可以访问所有模块，打包的每一个文件都是一个模块
2. compilation.chunks：chunk是多个modules组成而来的一个代码块，入口文件引入的资源组成一个chunk，代码分割的模块是另外的chunk
3. compilation.assets：可以访问本次打包生成所有文件的结果
4. compilation.hooks：可以注册tapable的不同种类hook，用于在compilation编译模块阶段进行添加和修改逻辑

3、生命周期

五、开发一个插件

最简单的插件

plugins/test-plugin.js

class TestPlugin {
  /*
    编译过程：
      1、webpack读取配置时，new TestPlugin()，会执行constructor方法
      2、webpack创建compiler对象
      3、遍历所有插件，调用插件的apply方法
      4、执行剩下的编译流程，触发各个hook
  */
  constructor() {
    console.log('测试plugin 构造函数');
  }
  apply(compiler) {
    console.log('测试plugin apply');
  }
}

module.exports = TestPlugin;

webpack.config.js

const TestPlugin = require('./plugins/test-plugin');


  plugins: [
    new TestPlugin()
  ]

注册hook

    compiler.hooks.compile.tap('TestPlugin', compilationParams => {
      console.log('compiler.compile()');
    });

    // make是异步并行钩子，依次打印3 2 1
    compiler.hooks.make.tap('TestPlugin', compilation => {
      setTimeout(() => {
        console.log('compiler.make() 1');
      }, 2000);
    });

    compiler.hooks.make.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('compiler.make() 2');
        callback();
      }, 1000);
    });

    compiler.hooks.make.tapPromise('TestPlugin', (compilation, callback) => {
      console.log('compiler.make() 3');
      return new Promise(res => {
        res();
      });
    });

    // emit是异步串行钩子，依次打印1 2 3
    compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('compiler.emit 1');
        callback();
      }, 3000);
    });

    compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('compiler.emit 2');
        callback();
      }, 2000);
    });

    compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('compiler.emit 3');
        callback();
      }, 1000);
    });

node启动调试

package.json

    "debug": "node --inspect-brk ./node_modules/webpack-cli/bin/cli.js"

运行指令：npm run debug

六、自定义BannerWebpackPlugin

作用：给打包输出文件添加注释

开发思路：

1. 需要打包输出前添加注释：需要使用compiler.hooks.emit钩子，它是打包输出前触发
2. 如何获取打包输出的资源？compilation.assets可以获取所有即将输出的资源文件

plugins/banner-webpack-plugin.js

class BannerWebpackPlugin {
  constructor(options = {}) {
    this.options = options;
  }
  apply(compiler) {
    const extensions = ['js', 'css'];
    // emit是异步串行钩子，输出asses到output目录之前执行
    compiler.hooks.emit.tapAsync(
      'BannerWebpackPlugin',
      (compilation, callback) => {
        // compilation.assets包含所有即将输出的资源
        const assetPaths = Object.keys(compilation.assets).filter(n => {
          const arr = n.split('.');
          return extensions.includes(arr[arr.length - 1]); // 只保留js和css文件
        });
        assetPaths.forEach(item => {
          const asset = compilation.assets[item];
          const source = `/*
author: ${this.options.author}
*/
${asset.source()}
`;
          compilation.assets[item] = {
            source() {
              return source;
            },
            size() {
              return source.length;
            }
          };
        });
        callback();
      }
    );
  }
}

module.exports = BannerWebpackPlugin;

webpack.config.js

const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin');


  plugins: [
    new BannerWebpackPlugin({ author: '吴小明' })
  ],

执行npx webpack

七、自定义CleanWebpackPlugin

作用：在webpack打包输出前将上次打包内容清空。webpack4中有这个插件，webpack5中直接配置clean: true即可

开发思路：

1. 如何在打包输出前执行：还是使用compiler.hooks.emit钩子
2. 如何清空上次打包内容：
   • 获取打包输出目录：通过compiler对象
   • 通过文件操作清空内容：通过compiler.outputFileSystem操作文件

plugins/clean-webpack-plugin.js

class CleanWebpackPlugin {
  apply(compiler) {
    const fs = compiler.outputFileSystem; // 获取操作文件的对象
    compiler.hooks.emit.tapAsync(
      'CleanWebpackPlugin',
      (compilation, callback) => {
        const outputPath = compiler.options.output.path; // 获取打包输出的目录，一般定义为dist，但是要获取一下
        const err = this.removeFiles(fs, outputPath);
        callback(err);
      }
    );
  }
  // 删除目录所有文件
  removeFiles(fs, path) {
    try {
      const files = fs.readdirSync(path); // 获取当前目录下所有文件
      files.forEach(file => {
        const filePath = `${path}/${file}`; // 获取文件完整路径
        const fileStat = fs.statSync(filePath); // 分析文件
        if (fileStat.isDirectory()) {
          this.removeFiles(fs, filePath); // 如果是文件夹，递归删除下面所有文件
        } else {
          fs.unlinkSync(filePath); // 不是文件夹，直接删除
        }
      });
      fs.rmdirSync(path); // 最后删除当前目录
    } catch (e) {
      return e;
    }
  }
}

module.exports = CleanWebpackPlugin;

webpack.config.js

const CleanWebpackPlugin = require('./plugins/clean-webpack-plugin');


  output: {
    // clean: true
  }
  
  
    new CleanWebpackPlugin()

执行npx webpack

八、自定义AnalyzeWebpackPlugin

作用：分析webpack打包资源大小，并输出分析文件

开发思路：

1. 在哪里操作：还是使用compiler.hooks.emit钩子，这里分析资源并且添加上分析后的md文件

plugins/analyze-webpack-plugin.js

class AnalyzeWebpackPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('AnalyzeWebpackPlugin', compilation => {
      const assets = Object.entries(compilation.assets);

      let source = '# 分析打包资源大小 \n| 名称 | 大小 |\n| --- | --- |';

      assets.forEach(([filename, file]) => {
        const kb = Math.ceil(file.size() / 1024);
        source += `\n| ${filename} | ${kb} |`;
      });

      // 添加资源
      compilation.assets['analyze.md'] = {
        source() {
          return source;
        },
        size() {
          return source.length;
        }
      };
    });
  }
}

module.exports = AnalyzeWebpackPlugin;

webpack.config.js

const AnalyzeWebpackPlugin = require('./plugins/analyze-webpack-plugin');


    new AnalyzeWebpackPlugin()

执行npx webpack

九、自定义InlineChunkWebpackPlugin

作用：webpack打包生成的runtime文件如果体积很小，可以考虑将其内联到js中，从而减小请求数量

开发思路：

1. 需要借助html-webpack-plugin来实现
   • 在html-webpack-plugin输出index.html前将内联runtime注入进去
   • 删除多余的runtime文件

下载包

cnpm i safe-require html-webpack-plugin -D

plugins/inline-chunk-webpack-plugin.js

const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin');

class InlineChunkWebpackPlugin {
  constructor(tests) {
    this.tests = tests;
  }

  apply(compiler) {
    compiler.hooks.compilation.tap('InlineChunkWebpackPlugin', compilation => {
      const hooks = HtmlWebpackPlugin.getHooks(compilation);

      hooks.alterAssetTagGroups.tap('InlineChunkWebpackPlugin', assets => {
        assets.headTags = this.getInlineTag(
          assets.headTags,
          compilation.assets
        );
        assets.bodyTags = this.getInlineTag(
          assets.bodyTags,
          compilation.assets
        );
      });

      hooks.afterEmit.tap('InlineChunkHtmlPlugin', () => {
        Object.keys(compilation.assets).forEach(assetName => {
          if (this.tests.some(test => assetName.match(test))) {
            delete compilation.assets[assetName];
          }
        });
      });
    });
  }

  getInlineTag(tags, assets) {
    return tags.map(tag => {
      if (tag.tagName !== 'script') return tag;

      const scriptName = tag.attributes.src;

      if (!this.tests.some(test => scriptName.match(test))) return tag;

      return {
        tagName: 'script',
        innerHTML: assets[scriptName].source(),
        closeTag: true
      };
    });
  }
}

module.exports = InlineChunkWebpackPlugin;

webpack.config.js

const InlineChunkWebpackPlugin = require('./plugins/inline-chunk-webpack-plugin');



    new InlineChunkWebpackPlugin([/runtime(.*)\.js/])
    
    
    
  optimization: {
    splitChunks: { chunks: 'all' },
    runtimeChunk: { name: entrypoint => `runtime~${entrypoint.name}.js` }
  }

执行npx webpack