资讯专栏INFORMATION COLUMN

JS每日一题:Webpack有哪些常见的Plugin?他们是解决什么问题的

songze / 1796人阅读

摘要:期有哪些常见的他们是解决什么问题的定义音译过来就是插件在中插件目的在于解决无法实现的其他事插件是一个具有属性的对象。

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点推送当天的参考答案

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

点击加入答题

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103120.html

相关文章

  • JS每日一题Webpack哪些常见Loader?他们解决什么问题

    摘要:期有哪些常见的他们是解决什么问题的在回答之前我们先来了解一下我们在上一节讲过,是属于模块化方案,他能让任意类型的文件都能运行在浏览器中,怎么做到呢这时就有了定义用于对模块的源代码进行转换。 20190326期 Webpack有哪些常见的Loader?他们是解决什么问题的? 在回答之前我们先来了解一下Loader 我们在上一节讲过,webpack是属于模块化方案,他能让任意类型的文件都能...

    Hanks10100 评论0 收藏0
  • JS每日一题:Vue-router哪些钩子?使用场景?

    摘要:问有哪些钩子使用场景的实现可以点这里前面我们用大白话讲过什么是钩子,这里在重复一下,就是在什么什么之前什么什么之后英文叫专业点叫生命周期,装逼点可以叫守卫中也存在钩子的概念分为三步记忆全局守卫路由独享守卫组件独享守卫全局守卫很好理解,全 20190218问 Vue-router有哪些钩子?使用场景? router的实现可以点这里 前面我们用大白话讲过什么是钩子,这里在重复一下,就是在...

    张金宝 评论0 收藏0
  • 前端面试

    摘要:前言这次找工作也面了好几家公司,也通过了好几家公司的面试,毕竟之前也准备了一段时间,所以面试的时候心里也不是很虚。的代码分割怎么实现的说说刚才提到的和的区别前端缓存怎么实现扯扯强缓存和协商缓存,重点问了如何实现缓存二面就聊了项目。。。 前言 这次找工作也面了好几家公司,也通过了好几家公司的面试,毕竟之前也准备了一段时间,所以面试的时候心里也不是很虚。 这里记录一下面试过程中被问到的问题...

    meteor199 评论0 收藏0
  • JS每日一题:Webpack如何实现一个Loader?

    摘要:期如何实现一个我们在上几节有讲过今天我们来深入了解它们最暴力的方式莫过于动手实现它们好了,回到正题先来回顾一下定义用于对模块的源代码进行转换。可以使你在或加载模块时预处理文件简单使用是导出为一个函数的模块。 20190329期 如何实现一个Loader? 我们在上几节有讲过loader,今天我们来深入了解它们,最暴力的方式莫过于动手实现它们 好了,回到正题, 先来回顾一下loader ...

    HollisChuang 评论0 收藏0
  • JS每日一题: 前端缓存哪些?都适用什么场景?区别什么

    摘要:问前端的缓存有哪些都适用什么场景区别是什么参考回答前端缓存分为两部分缓存浏览器缓存缓存强缓存强缓存主要是采用响应头中的和两个字段进行控制的值理解指定设置缓存最大的有效时间单位为指定响应会被缓存,并且在多用户间共享响应只作为私有的缓存, 20190116问: 前端的缓存有哪些?都适用什么场景?区别是什么? 参考回答 前端缓存分为两部分: http 缓存 浏览器缓存 http 缓存 强...

    MockingBird 评论0 收藏0

发表评论

0条评论

songze

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<