webpack自定义plugin

Webpack和Tapable

1. webpack有两个非常重要的类：Compiler和Compilation
2. 他们通过注入插件的方式，来监听webpack的所有生命周期；
3. 插件的注入离不开各种各样的Hook，而他们的Hook是如何得到的呢？
4. 其实是创建了Tapable库中的各种Hook的实例；
5. 所以，如果我们想要学习自定义插件，最好先了解一个库：Tapable
6. Tapable是官方编写和维护的一个库；
7. Tapable是管理着需要的Hook，这些Hook可以被应用到我们的插件中；

Tapable有哪些Hook呢？

Tapable的Hook分类

1. 同步和异步的：
2. 以sync开头的，是同步的Hook；
3. 以async开头的，两个事件处理回调，不会等待上一次处理回调结束后再执行下一次回调；
4. 其他的类别
5. bail：当有返回值时，就不会执行后续的事件触发了；
6. Loop：当返回值为true，就会反复执行该事件，当返回值为undefined或者不返回内容，就退出事件；
7. Waterfall：当返回值不为undefined时，会将这次返回的结果作为下次事件的第一个参数；
8. Parallel：并行，会同时执行次事件处理回调结束，才执行下一次事件处理回调；
9. Series：串行，会等待上一是异步的Hook；

Hook的使用过程

1. 第一步：创建Hook对象

2. 第二步：注册Hook中的事件

3. 第三步：触发事件

自定义Plugin

1. 常见的Plugin：
2. CleanWebpackPlugin
3. HTMLWebpackPlugin
4. MiniCSSExtractPlugin
5. CompressionPlugin
6. 这些Plugin是如何被注册到webpack的生命周期中的呢
7. 第一：在webpack函数的createCompiler方法中，注册了所有的插件
8. 第二：在注册插件时，会调用插件函数或者插件对象的apply方法
9. 第三：插件方法会接收compiler对象，我们可以通过compiler对象来注册Hook的事件
10. 第四：某些插件也会传入一个compilation的对象，我们也可以监听compilation的Hook事件

webpack自定义插件plugin

在Webpack中，可以使用自定义插件（Custom Plugin）来扩展和定制构建过程。自定义插件是一个JavaScript对象，它包含一些特定的方法，可以在Webpack构建过程中的不同阶段执行特定的任务和操作。

下面是创建自定义插件的一般步骤：

1. 创建一个 JavaScript 文件，命名为CustomPlugin.js（文件名可以根据需要自定义）。

2. 在该文件中定义一个类，并在其原型上添加指定方法。常见的方法包括：

   • constructor：构造函数，可以在实例化插件时接收参数。
   • apply：Webpack会调用该方法，并将Compiler对象作为参数传递给它。在这个方法中可以执行一些自定义的构建任务。

   class CustomPlugin {
     constructor(options) {
       // 构造函数可以接收参数
       this.options = options;
     }
   
     apply(compiler) {
       // 在apply方法中执行自定义的构建任务
       compiler.hooks.someHook.tap('CustomPlugin', stats => {
         // 执行构建任务
       });
     }
   }
   

3. 在Webpack配置文件中引入自定义插件，并将其作为plugins属性的值。

   const CustomPlugin = require('./CustomPlugin');
   
   module.exports = {
     // ...其他配置
     plugins: [
       new CustomPlugin({ /* 传递自定义参数 */ })
     ]
   };
   

自定义插件通过访问Webpack提供的钩子（hooks）来插入到构建过程的各个阶段。Webpack的钩子机制允许你在特定的时机执行自定义的任务，例如在编译之前、之后，或者在特定事件触发时执行。

在自定义插件方法中，你可以使用Webpack提供的API和工具函数来修改编译结果、生成文件、执行额外的任务、优化代码等。

请注意，自定义插件的实现可能会依赖于Webpack版本或其它相关的库，因此在编写自定义插件时，最好根据当前使用的Webpack版本和文档来编写和调整插件代码。