webpack始终是前端绕不过去的一个东西
- webpack的plugins详解12345678// 插件代码class MyWebpackPlugin {constructor(options) { }apply(compiler) {// 在emit阶段插入钩子函数compiler.hooks.emit.tap('MyWebpackPlugin', (compilation) => {});}}module.exports = MyWebpackPlugin;
compiler hooks的周期
钩子 | 说明 | 参数 | 类型 |
---|---|---|---|
afterPlugins | 启动一次新的编译 | compiler | 同步 |
emit | 资源生成完成,输出之前 | compilation | 异步 |
更多参考网上教程
- 一个简单的实例1234567891011// 一般模式compileer.hooks.阶段.tap函数('插件名称', (阶段回调参数) => {});compiler.hooks.emit.tapAsync('MyWebpackPlugin', (compilation, callback) => {setTimeout(()=>{console.log('文件列表', Object.keys(compilation.assets).join(','));callback();}, 1000);});
只有异步钩子才能使用异步函数
3.下面这个例子
4.看一下这个例子
当然如果我们想获取这次compiler里面包含的plugins,可以用compiler.option.plugins获取
5.最后一个例子
html-webpack-plugin-before-html-generation是webpack-html-plugin的一个周期
webpack自带一些plugin可以去看看progress-bar-webpack-plugin
6.讲完plugin肯定少不了loader的用法
7.最后带来一个react advance design
其实就是一个context api加hooks的使用, 使用hook再也不用把组件包裹在context.consumer里面了