webpack 开发插件写法规范流程

357 阅读3分钟

首先开发 webpack 的插件 是需要对webpack 的执行顺序以及需要查找对插件功能对应的合适的执行时机(webpack 暴露的官方调用钩子)

借用官方的描述就是:

创建插件

webpack 插件由以下组成

  • 1.一个 JavaScript 命名函数或 JavaScript 类。

  • 2.在插件函数的 prototype 上定义一个 apply 方法。

  • 3.指定一个绑定到 webpack 自身的事件钩子。

  • 4.处理 webpack 内部实例的特定数据。

  • 5.功能完成后调用 webpack 提供的回调。

 

需要注意的是: 关于compiler钩子 有哪些在如下网址查看

compiler 钩子说明文档

webpack 插件开发说明文档

webpack 插件开发demo 文章

webpack插件开发如此简单

 

下面关于代码规范和流程会大概描述一个专业的webpack 插件包含哪些东西

插件规范和流程

自上而下描述

1.导入你需要的对应的工具包和自己封装的函数(因为webpack只会执行你创建的class的js 类 类似项目中的入口文件,将需要执行对应函数导入进来)

2.需要定义一个 叫做 plugin_name 的常量 来保存当前插件的默认名称(使用驼峰命名法)

3.需要定义个默认的基础配置 default_config 的常量 来保证使用如果不传任何参数依旧可以正常运行。

4.非必须项 如果当前开发的插件还需要输出文件等操作,需要加入解析路径,同名文件判断,文件夹创建等等,保证插件稳定性的验证函数

5.编写插件本体,也就是定义class 插件类 并且编写初始化函数 constructor 内部以调用webpack 提供的插件验证库 schema-utils,主要以验证插件名称和 是否传入正确的内部定义的同名配置参数 以及在外部文件夹中定义好的插件内部功能描述类型 属性等并且执行配置参数合并操作。

6.编写抽象化代码,将功能点封装起来并暴露一个执行函数 run 然后通过接受参数 第一个为需要执行的函数,第二个为需要的参数点。 将用户传入的简要参数,进行解析验证后同步成功能函数需要的参数,传入进来。

6.下面在apply(compiler) webpack 回调函数内部,获取到 当前webpack 执行插件时机的上下文,已经当前webpack 执行插件的logger ,并定义开始和结束的函数,通过compiler.hooks.钩子.tapPromise 的形式 绑定执行,如果有多个执行任务时,需要定义一个watchCount记录当前webpack 用户配置的功能点和 当前执行次数 比对,如果用户执行功能点 没有 并且 watchCount 执行超过0次就视为执行完毕,return退出当前递归,并退出插件执行。

7.导出上述文件中定义的插件类即可。

8.webpack 插件项目以npm init 创建标准项目为主,并且需要自主配置package.json 中需要使用的参数,和入口文件。以及版本id 标识等。并且需要支持打包等,demo 项目使用的是rollup 打包,并且整体项目使用都是js ,但是为了webpack 识别和代码提示功能 加入了types.d.ts 的文件,表明了需要传入参数的类型,以及当前参数中内部功能函数的类型,和插件类 和webpack 公共类的继承关系并导出。

declare class FileManagerPlugin implements WebpackPluginInstance {
  constructor(options?: Options);
  apply(compiler: Compiler): void;
}

9.打包完成需要上传npm 切记每次更新后需要修改版本号

文献

上述规范描述 均根据 filemanager-webpack-plugin 这个 Webpack 插件允许您在构建前后复制、存档 (.zip/.tar/.tar.gz)、移动、删除文件和目录

compiler 钩子说明文档

webpack 插件开发说明文档

webpack插件开发如此简单

非必须

husky

prettier