【Vue】1-3、Webpack 中的 loader

一、概述

在实际开发过程中,webpack 默认只能打包处理以 .js 后缀结尾的模块。

其他的非 .js 后缀名结尾的模块 webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错!

loader 加载器的作用:协助 webpack 打包处理特定的文件模块。

  • css-loader 可以打包处理 .css 相关文件

  • less-loader 可以打包处理 .less 相关文件

  • babel-loader 可以打包处理 webpack 无法处理的高级 js 语法

二、打包处理 css 文件 

步骤:

1)运行 npm install style-loader@3.0.0 css-loader@5.2.6 -D 命令,安装处理 css 文件的 loader

2)在 webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:

module:{	// 所有第三方文件模块的匹配规则rules: [	// 文件后缀名的匹配规则{test:/\.css$/,use:['style-loader','css-loader']}]
}

其中,test 表示匹配的文件类型use表示对应要调用的 loader

注意:

use 数组中指定的 loader 顺序是固定的

多个 loader 的调用顺序是:从后往前调用

 

三、打包处理 less 文件 

步骤:

1)运行 npm install less-loader@10.0.1 less@4.1.1 -D 命令

2)在 webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:

module:{	// 所有第三方文件模块的匹配规则rules: [	// 文件后缀名的匹配规则{test:/\.less$/, use:['style-loader','css-loader','less-loader']}]
}

 

四、打包处理样式表中与 url 路径相关的文件  

步骤:

1)运行 npm install url-loader@4.1.1 file-loader@6.2.0 -D 命令

2)在 webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:

module:{	// 所有第三方文件模块的匹配规则rules: [	// 文件后缀名的匹配规则{test:/\.jpg|png|gif$/, use:['url-loader?limit=22229']}]
}

其中 之后的是 loader 的参数项:

  • limit 用来指定图片的大小,单位是字节(byte

  • 只有 <= limit 大小的图片,才会被转为 base64 格式的图片

 

五、打包处理 js 文件中的高级语法  

webpack 只能打包处理 一部分高级的 JavaScript 语法。

对于那些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理。

例如 webpack 无法处理下面的 JavaScript 代码:

 

// 定义了名为 info 的装饰器
function info(target){// 为目标添加静态属性 infotarget.info = 'Person info.'
}
// 为 Person 类应用 info 装饰器
@info
class Person{}// 打印 Person 的静态属性info
console.log(Person.info)

步骤:

1)运行 npm install babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D 命令

2)在 webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:

module:{	// 所有第三方文件模块的匹配规则rules: [	// 文件后缀名的匹配规则{test:/\.js$/, use:'babel-loader',exclude:/node_modules/}]
}

3)在项目根目录下,创建名为 babel.config.js 的配置文件,定义 Babel 的配置项如下:  

module.exports = {// 声明 babel 可用的插件plugins:[['@babel/plugin-proposal-decorators',{legacy: true}]]
}

 Babel官网:https://babeljs.io/dosc

一  叶  知  秋,奥  妙  玄  心 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity 命令模式(实例详解)

文章目录 示例1&#xff1a;基础命令类结构示例2&#xff1a;旋转对象命令示例3&#xff1a;增加道具命令示例4&#xff1a;切换场景命令示例5&#xff1a;播放音效命令 在Unity中使用命令模式&#xff08;Command Pattern&#xff09;是一种常见的设计模式&#xff0c;用于实现…

在Python中的集合是什么

目录 创建集合 集合的特性 集合的基本操作 集合的运算 集合的遍历和判断元素是否存在 总结 在Python中&#xff0c;集合&#xff08;Set&#xff09;是一个内置的数据类型&#xff0c;用于存储不重复的元素集合。集合的特点是元素是无序的&#xff0c;且每个元素是唯一的…

C语言-算法-背包

[USACO07DEC] Charm Bracelet S&#xff08;01背包&#xff09; 题目描述 Bessie has gone to the mall’s jewelry store and spies a charm bracelet. Of course, she’d like to fill it with the best charms possible from the N (1 ≤ N ≤ 3,402) available charms. E…

apt-mark详解

文章目录 1、简介2、apt-mark auto packagename3、apt-mark manual4、apt-mark hold5、apt-mark unhold6、apt-mark showauto7、apt-mark showmanual8、apt-mark showhold 1、简介 apt-mark常用于标记一个包是否是自动安装的。 2、apt-mark auto packagename 标记一个包为自…

ssh异常报错:Did not receive identification string from

一、问题描述 某次外出在异地工作场所xshell炼乳远程服务器时&#xff0c;报错&#xff1a;Connection closed by foreign host. D&#xff0c;服务器查看secure日志或sshd服务状态会显示&#xff1a;id not receive identification string from client_ip; 二、分析处理 1&a…

多表查询,

1&#xff0c;多表查询 实际开发中&#xff0c;一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系&#xff0c;接下来我们将在单表的基础上&#xff0c;一起学习多表…

如何在前端项目里接入Sentry监控系统并通过企业微信通知

能不能让用户录个屏过来呀&#xff1f; 用户使用的是什么机型的手机&#xff1f; 用户使用的什么浏览器呀&#xff1f; 用户的网络是什么情况&#xff1f; … … 线上出现问题时&#xff0c;技术部和业务部同学之间的对话诸如此类…业务同学也很栓Q呀&#xff0c;硬着头皮去问客…

element-UI上传文件后valid提示不消失

问题描述&#xff1a;上传文件完成后&#xff0c;必填信息提示不消失 解决方法&#xff1a;在<el-form-item>标签添加show-message属性&#xff0c;字段为空时才显示提示信息 <el-form-item :prop"fileList" :show-message"!form.fileList || !form.f…

OPEN NT 4.5 编译方法和源代码下载

OPEN NT 4.5&#xff08;源代码编译方法&#xff09; 编译Windows NT 4.0到操作系统的详细方法 OPEN 4.5 ​​​​​​下载 &#xff1a;https://download.csdn.net/download/MYMOTOE6/88786570 ISO https://download.csdn.net/download/MYMOTOE6/88786572 OPEN NT 4.5&#…

LeetCode:1701. 平均等待时间(Java 模拟)

目录 1701. 平均等待时间 题目描述&#xff1a; 实现代码与解析&#xff1a; 简单模拟 原理思路&#xff1a; 1701. 平均等待时间 题目描述&#xff1a; 有一个餐厅&#xff0c;只有一位厨师。你有一个顾客数组 customers &#xff0c;其中 customers[i] [arrivali, time…

为什么网页打开慢?是服务器的问题吗?

当我们遇到网页加载缓慢时&#xff0c;首先想到的可能是服务器的问题。的确&#xff0c;服务器是影响网页加载速度的一个重要因素。然而&#xff0c;这并非是唯一的原因。实际上&#xff0c;网页加载速度受多种因素影响&#xff0c;包括但不限于服务器、网络带宽、DNS解析时间、…

c# cad2016选择封闭多段线获取多段线面积

在C#中&#xff0c;如果你想要通过AutoCAD .NET API来选择封闭多段线内部的其他闭合多段线并计算它们各自的面积&#xff0c;可以遵循以下基本步骤&#xff1a; 1、加载AutoCAD库&#xff1a; 确保你的C#项目引用了Autodesk.AutoCAD.Interop和Autodesk.AutoCAD.Interop.Common…

短视频批量抽帧怎么做

随着短视频的流行&#xff0c;越来越多的创作者需要处理大量的视频素材。其中&#xff0c;批量抽帧是一项常见的需求&#xff0c;它可以帮助我们快速提取视频中的关键帧&#xff0c;以便进行后续的处理或分析。那么&#xff0c;如何高效地进行短视频批量抽帧呢&#xff1f;接下…

微信开发者工具 git 拉取 failed invalid authentication scheme

微信开发者工具 git 拉取 failed invalid authentication scheme 拉取代码时报错,无效身份认证 解决方案: 1.检查git地址是否正常 2.检查git用户名密码是否正确

什么工具能将视频转成gif?分享一个在线制作gif网站

Gif动图看起来效果非常的炫酷&#xff0c;也很复杂。这种gif动图制作起来是不是也很麻烦呢&#xff1f;其实制作gif动画的方法非常的简单&#xff0c;不用下载软件&#xff0c;小白也能操作。只需要使用在线制作gif&#xff08;https://www.gif.cn/&#xff09;工具-GIF中文网&…

代码随想录算法训练营第十六天 |104.二叉树的最大深度,111.二叉树的最小深度,222.完全二叉树的节点个数(待补充)

104.二叉树的最大深度 1、题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 2、文章讲解&#xff1a;代码随想录 3、题目&#xff1a; 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长…

《30天自制操作系统》 第一周(D1-D7) 笔记

前言&#xff1a;这是我2023年5月份做的一个小项目&#xff0c;最终是完成了整个OS。笔记的话&#xff0c;只记录了第一周。想完善&#xff0c;却扔在草稿箱里许久。最终决定&#xff0c;还是发出来存个档吧。 一、汇编语言 基础指令 MOV: move赋值&#xff0c;数据传送指令…

【传记】-综述

写在前面 “我就是想告诉你们&#xff0c; 别废了自己在部队的日子&#xff0c;做人要有目标感。” “别混日子了&#xff0c;小心日子把你们给混了。”—— 老马 影视来源于生活&#xff0c;借用《士兵突击》中老马的话开篇&#xff0c;回到现实&#xff0c;我们也确实需要时时…

C语言常见面试题:什么是内存管理,C语言中如何进行内存管理?

内存管理是计算机科学中的一个重要概念&#xff0c;它涉及到如何有效地分配、使用和释放计算机内存。内存管理是操作系统和编程语言实现中的一项关键任务&#xff0c;它确保了程序能够安全、有效地运行。 在C语言中&#xff0c;内存管理主要通过以下方式进行&#xff1a; 静态…

提升养殖场效益,从饲料粉碎机开始

为了提高养殖效益&#xff0c;养殖户可以从很多方面着手&#xff0c;其中饲料成本是一个重要的因素。为了降低饲料成本&#xff0c;养殖户可以考虑从饲料粉碎环节入手。通过购买和采用高效、低成本的饲料粉碎机&#xff0c;养殖户可以更好地控制饲料成本&#xff0c;提高饲料的…