JS每日一题:Webpack有哪些常见的Plugin?他们是解决什么问题的
发布于 3个月前 作者 ab8512 530 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

20190327期

Webpack有哪些常见的Plugin?他们是解决什么问题的

定义: 音译过来就是插件, 在webpack中, 插件目的在于解决 loader 无法实现的其他事

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问

代码理解:

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    // compiler 对象是 webpack 的编译器对象
    apply(compiler) {
        // hook中的tap函数的第一个参数便是插件的名称
        compiler.hooks.run.tap(pluginName, compilation => {
            // 我们的webpack配置应用了插件后便会执行该函数体
            console.log("webpack 构建过程开始!");
        });
    }
}

用法:

const webpack = require('webpack');
// 上方定义的插件
const ConsoleLogOnBuildWebpackPlugin = require('ConsoleLogOnBuildWebpackPlugin');
webpack({
    // ...
    plugins: [
        new ConsoleLogOnBuildWebpackPlugin({/* some plugin options */})
    ]
    // ...
});

上面示例中有提到hooks,在plugin有哪些hooks呢?我们也简单列举一下

  • entry-option 初始化 option
  • run
  • compile 真正开始的编译,在创建 compilation 对象之前
  • compilation 生成好了 compilation 对象
  • make 从 entry 开始递归分析依赖,准备对每个模块进行 build
  • after-compile 编译 build 过程结束
  • emit 在将内存中 assets 内容写到磁盘文件夹之前
  • after-emit 在将内存中 assets 内容写到磁盘文件夹之后
  • done 完成所有的编译过程
  • failed 编译失败的时候

Webpack有哪些常见的Plugin

如上篇loader所讲,这里没有任何意义,只是想让你们加深下感觉,了解下自己项目中到底用到了哪些plugin, 下面放一张来自官网的图

1553696144981.jpg

Plugin的特性

  • 是一个独立的模块
  • 模块对外暴露一个 js 函数
  • 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply 方法
  • apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子,钩子的回调中能拿到当前编译的 compilation 对象,如果是异步编译插件的话可以拿到回调 callback
  • 完成自定义子编译流程并处理 complition 对象的内部数据
  • 如果异步编译插件的话,数据处理完成后执行 callback 回调

简单理了一下plugin的特性再回过头去看一看示例,应该就会更清淅了

总结

  • plugin是用来拓展webpack功能的
  • plugin是一个具有 apply 属性的 JavaScript 对象
  • apply 属性会被 webpack compiler 调用
  • compiler 对象是 webpack 的编译器对象
  • 编译器对象会有一系列hooks
  • 利用hooks在不同阶段完成对被编译者的处理

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

  • 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路

点击加入答题

回到顶部