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
目录如下:
最主要的文件是:index.js 和 package.json,其他文件都是测试用的,你可有可无。
2.创建入口文件 index.js
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.查看结果
附件
整个 webpack 有很多钩子,你要是想查看具体的 api 可以去 webpack 的官网查看。