写一个 plugin 发布到npm上然后使用它

304 阅读1分钟

plugin 机制: 钩子机制。

自定义 loader 已经在上一篇开发过了,loader 是在 webpack 的生命周期的 transform 阶段发生作用。但是 plugin 是在 webpack 的整个生命周期发挥作用。在 webpack 的整个生命周期里面都暴露出来很多个钩子(hooks),我们编写的 plugin 只需要挂载在这些钩子上,只要创建好compiler 以后就会开始通过 plugin 的配置注册好所有的插件。在 webpack 生命周期开始以后就直接监听这些挂载好的 plugin 即可。

自定义 plugin 步骤

1.创建项目 demo-webpack-plugin(自己起个名字)

mkdir demo-webpack-plugin

npm init

目录如下:

image.png

最主要的文件是:index.js 和 package.json,其他文件都是测试用的,你可有可无。

image.png

2.创建入口文件 index.js

image.png

3.发布 npm 包

npm publish

4.在你的项目里面使用

npm i XXXX-webpack-plugin -D

在 webpack.config.js 文件里面引入

const RemoveCommentPlugin = require('snow-remove-comment-plugin')

plugin: { new XXXWebpackPlugin() }

5.查看结果

image.png

附件

整个 webpack 有很多钩子,你要是想查看具体的 api 可以去 webpack 的官网查看。