JS逐日一题:Webpack有哪些罕见的Plugin？他们是处理什么问题的

2019年8月31日 194次阅读 来源: febobo

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, 下面放一张来自官网的图

《JS逐日一题:Webpack有哪些罕见的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点推送当天的参考答案

  • 注 毫不仅限于完成当天使命，更多是查漏补缺，进修群内别的同砚优异的答题思绪

点击到场答题

    原文作者：febobo
    原文地址: https://segmentfault.com/a/1190000018695134
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞