webpack基础知识五:说说Loader和Plugin的区别?编写Loader,Plugin的思路?

这篇具有很好参考价值的文章主要介绍了webpack基础知识五:说说Loader和Plugin的区别?编写Loader,Plugin的思路?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

webpack基础知识五:说说Loader和Plugin的区别?编写Loader,Plugin的思路?,webpack,前端,node.js
一、区别

前面两节我们有提到Loader与Plugin对应的概念,先来回顾下

  • loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中
  • plugin 赋予了 webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目的是解决 loader 无法实现的其他事

从整个运行时机上来看,如下图所示:

webpack基础知识五:说说Loader和Plugin的区别?编写Loader,Plugin的思路?,webpack,前端,node.js
可以看到,两者在运行时机上的区别:

  • loader 运行在打包文件之前
  • plugins 在整个编译周期都起作用

在Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过Webpack提供的 API改变输出结果

对于loader,实质是一个转换器,将A文件进行编译形成B文件,操作的是文件,比如将A.scss或A.less转变为B.css,单纯的文件转换过程

二、编写loader

在编写 loader 前,我们首先需要了解 loader 的本质

其本质为函数,函数中的 this 作为上下文会被 webpack 填充,因此我们不能将 loader设为一个箭头函数

函数接受一个参数,为 webpack 传递给 loader 的文件源内容

函数中 this 是由 webpack 提供的对象,能够获取当前 loader 所需要的各种信息

函数中有异步操作或同步操作,异步操作通过 this.callback 返回,返回值要求为 string 或者 Buffer

代码如下所示:

// 导出一个函数,source为webpack传递给loader的文件源内容
module.exports = function(source) {
    const content = doSomeThing2JsString(source);
    
    // 如果 loader 配置了 options 对象,那么this.query将指向 options
    const options = this.query;
    
    // 可以用作解析其他模块路径的上下文
    console.log('this.context');
    
    /*
     * this.callback 参数:
     * error:Error | null,当 loader 出错时向外抛出一个 error
     * content:String | Buffer,经过 loader 编译后需要导出的内容
     * sourceMap:为方便调试生成的编译后内容的 source map
     * ast:本次编译生成的 AST 静态语法树,之后执行的 loader 可以直接使用这个 AST,进而省去重复生成 AST 的过程
     */
    this.callback(null, content); // 异步
    return content; // 同步
}

一般在编写loader的过程中,保持功能单一,避免做多种功能

如less文件转换成 css文件也不是一步到位,而是 less-loader、css-loader、style-loader几个 loader的链式调用才能完成转换

三、编写plugin

由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段执行自己的插件任务

在之前也了解过,webpack编译会创建两个核心对象:

  • compiler:包含了 webpack 环境的所有的配置信息,包括 options,loader 和 plugin,和 webpack 整个生命周期相关的钩子
  • compilation:作为 plugin 内置事件回调函数的参数,包含了当前的模块资源、编译生成资源、变化的文件以及被跟踪依赖的状态信息。当检测到一个文件变化,一次新的 Compilation 将被创建

如果自己要实现plugin,也需要遵循一定的规范:

  • 插件必须是一个函数或者是一个包含 apply 方法的对象,这样才能访问compiler实例
  • 传给每个插件的 compiler 和 compilation 对象都是同一个引用,因此不建议修改
  • 异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程,不然会卡住

实现plugin的模板如下:

class MyPlugin {
    // Webpack 会调用 MyPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply (compiler) {
    // 找到合适的事件钩子,实现自己的插件功能
    compiler.hooks.emit.tap('MyPlugin', compilation => {
        // compilation: 当前打包构建流程的上下文
        console.log(compilation);
        
        // do something...
    })
  }
}

在 emit 事件发生时,代表源文件的转换和组装已经完成,可以读取到最终将输出的资源、代码块、模块及其依赖,并且可以修改输出资源的内容文章来源地址https://www.toymoban.com/news/detail-624180.html

到了这里,关于webpack基础知识五:说说Loader和Plugin的区别?编写Loader,Plugin的思路?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack 中的loader 和plugin的区别

    Loader: 作用: Loader 用于在模块加载时对文件进行转换。它是一个转换器,将文件从一种形式转换为另一种形式,例如,将 ES6 语法的 JavaScript 文件转换为能够在浏览器中运行的普通 JavaScript。 使用场景: Loader通常被配置在 module.rules 中,指定了哪些文件应该被哪些Loader处理。

    2024年01月22日
    浏览(35)
  • css基础知识二十:说说对Css预编语言的理解?有哪些区别?

    一、是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码

    2024年02月16日
    浏览(41)
  • css基础知识三:说说em/px/rem/vh/vw的区别?

    一、介绍 传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性 从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式

    2024年02月09日
    浏览(49)
  • webpack基础知识十:与webpack类似的工具还有哪些?区别?

    一、模块化工具 模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割,组织和打包应用。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体(bundle) 在前端领域中,并非只有webpack这一款优秀的模块打包工具,还有其他类似的

    2024年02月13日
    浏览(33)
  • css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?

    一、背景 在css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉,我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表

    2024年02月10日
    浏览(41)
  • 网络基础知识(2)——简单说说IP地址

            Internet 依靠 TCP/IP 协议,在全球范围内实现不同硬件结构、不同操作系统、不同网络系统的主机之间的互联。在 Internet 上,每一个节点都依靠唯一的 IP 地址相互区分和相互联系,IP 地址用于标识互联网中的每台主机的身份,设计人员为每个接入网络中的主机都分

    2024年02月04日
    浏览(49)
  • Webpack的Loader和Plugin

    1.1 Loader作用 把js和json外的其它文件转为Webpack可以识别的模块 1.2 Loader简介 1.2.1 Loader类型 1.总类型 pre: 前置loader normal: 普通loader inline: 内联loader post: 后置loader 2.默认类型 默认为normal类型 3.修改类型 配置时可以通过enforce修改 pre,normal,post 类型。 1.2.2 Loader顺序 1.总顺序

    2024年04月18日
    浏览(41)
  • Webpack中的Loader和Plugin:理解与使用

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年03月10日
    浏览(65)
  • webpack基础知识

    webpack的本质是一个第三方模块包,用于分析,并打包代码 支持所有类型的文件打包 支持less/sass= css 支持ES6/7/8=ES5 压缩代码,提高加载速度 yarn安装 配置环境变量 验证 配置scripts 需求 两个js文件打包成一个js文件 index.js add.js 打包命令 在对应src目录下

    2024年02月13日
    浏览(36)
  • webpack基础知识九:如何提高webpack的构建速度?

    一、背景 随着我们的项目涉及到页面越来越多,功能和业务代码也会随着越多,相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关,当我们本地开发启动 devServer 或者 build 的时候,如果时间过长,会大大降低我们的工作效率 所以,优化webpack 构建

    2024年02月14日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包