共计 1510 个字符，预计需要花费 4 分钟才能阅读完成。
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, 下面放一张来自官网的图
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 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题
