webpack-loader的使用

引入css后执行打包命令 "build": "npx webpack --config wk.config.js"发现报错：
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

webpack默认只能处理js其他的像css,图片都需要借助loader来处理

css-loader

loader可以用于对模块的源代码进行转换，可以把css看成一个模块，模块可以通过import来加载，但是在加载模块时，webpack不知道如何对其进行加载，需要特定的loader完成这个功能。
npm i css-loader -D

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,use: [{loader:"css-loader"}],},],},
};

module.rules中允许我们配置多个loader.。rules对应的值是一个数组[rule],数组中存放多个rule,rule是一个对象，有多个属性：
test:用于对资源进行匹配，通常会设置成正则表达式
use:对应的值是一个数组[useEntry] useEntry是一个数组也有一些属性

  1. loader:必须要一个loader属性，对应的值是一个字符串。只有一个loader时可以简写 例如use:[“css-loader”]
  2. options:可选的属性,只是一个字符串或对象
  3. query：目前已经被options给替代
    loader: use:[loader]的简写， 只有一个loader时也可以简写 loader:“css-loader”

简写：

//原来写法module: {rules: [{test: /\.css$/,use: [{loader:"css-loader"}],},],
// 简写1module: {rules: [{test: /\.css$/,loader:"css-loader"},],},
// 简写2module: {rules: [{test: /\.css$/,use:["csss-loader"]},],},

style-loader

css-loader只能解决不报错的问题,但是css样式并没有生效。这是因为css-loader只负责解析css，不会将解析后的css插入到页面中，需要通过style-loader把样式插入到页面中。
npm i style-loader -D


const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},],},
};
// use: ["style-loader", "css-loader"], 也可以写成   use: [{ loader: "css-loader" }, { loader: "css-loader" }],

loader的执行顺序是从后往前执行的
在index.html中引入打包后的文件，就可以在页面中看到效果
在这里插入图片描述

sass-loader 解析sass

npm i sass-loader -D

编写sass并引入文件

在这里插入图片描述

配置sass-loader

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.scss$/,use: ["style-loader", "css-loader", "sass-loader"],},],},
};

postcss-loader

PostCSS是一个用JavaScript插件转换CSS的工具。它可以帮助开发人员处理CSS，包括自动添加浏览器前缀、CSS变量、嵌套规则、函数等
npm i postcss-loader -D
以 autoprefixer （会添加一些浏览器的前缀）为例

.在这里插入图片描述
由于postcss-loader有很多配置项，所以使用对象的形式：

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,use: ["style-loader","css-loader",{loader: "postcss-loader",options: {postcssOptions: {plugins: ["autoprefixer"],//也有这种写法plugins: [require("autoprefixer")],现在可以省略require()},},},],},],},
};

结果：
在这里插入图片描述
由于postcss配置项太多，postcss通常单独抽离出一个文件postcss.config.js:
在这里插入图片描述
在webpack中就可以简写了：

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},],},
};

“autoprefixer"只能自动添加浏览器前缀，postcss还有其他功能，因此实际开发中并不会安装"autoprefixer”,而是使用 postcss-preset-env它可以将一些现代的css特性转换为浏览器所识别的特性。npm i postcss-preset-env -D
在这里插入图片描述

处理资源模块

在webpack5之前 加载这些资源需要使用一些loader，例如raw-loader,url-loader等。
在webpack5之后，可以直接使用资源模块类型(asset module type)来代替上面这些loader。

资源模块的类型分为 asset/resource ,asset/inline,asset/source,asset。

asset/resource:发送一个单独的文件并导出url(之前通过file-loader来),如果有两个图片，在打包后会生成两个文件，这就意味着还要发送额外的请求。

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.(png|jpe?g|gif|svg)$/,type: "asset/resource",},],},
};

这里要注意图片也要当作一个模块来导入
在这里插入图片描述
执行命令后可以看到打包后的结果：
在这里插入图片描述

asset/inline：将图片进行base64编码，并把编码后的源码打包到js文件中。会造成js文件非常大，下载和解析js文件需要的时间长。

onst path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.scss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.(png|jpe?g|gif|svg)$/,type: "asset/inline",},],},
};

打包后的js文件
在这里插入图片描述
这里还加了一个背景图.bgi { background-image: url(../asset/1.png); } img和background-image的url都是base64格式的
在这里插入图片描述
asset/source：是将图片的源码打包到js文件中和asset/inline一样会造成js文件过大。

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,。use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.scss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.(png|jpe?g|gif|svg)$/,type: "asset/source",},],},
};

在这里插入图片描述
asset:可以根据需要生成一个单独的文件，或打包到js中。

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.scss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.(png|jpe?g|gif|svg)$/,type: "asset",},],},
};

一般type会设置为asset，将较小的文件进行base64编码，较大的文件单独打包。

根据文件大小打包

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.(png|jpe?g|gif|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 4 * 1024,},},},],},
};//webpack官网:https://www.webpackjs.com/configuration/module/#ruleparserdataurlcondition
// 如果一个模块源码大小小于 maxSize，那么模块会被作为一个 Base64 编码的字符串注入到包中， 否则模块文件会被生成到输出的目标目录中。
//dataUrlCondition 还可以写成函数的形式

在这里插入图片描述

对打包后的文件名，文件目录进行操作

可以在output中对打包后生成的文件进行操作，比如修改文件名。但是在这里修改会影响所有的文件，不推荐在这里修改。

// 这里也是可以支持[hash][ext][query]的
const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),assetModuleFilename: "aa.png",},module: {rules: [ ],},
};

应该针对对应的文件修改：

const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.(png|jpe?g|gif|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 4 * 1024,},},generator: {filename: "img/[hash][ext]",},},],},
};
// webpack官网：https://www.webpackjs.com/configuration/module/#rulegeneratorfilename
//这里其实还可以控制生成的hash值的长度 img/[hash:8][ext]

在这里插入图片描述

到目前为止所有的代码

//webpack
const path = require("path");
module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.scss$/,use: ["style-loader", "css-loader", "sass-loader"],},{test: /\.(png|jpe?g|gif|svg)$/,type: "asset",parser: {dataUrlCondition: {maxSize: 4 * 1024,},},generator: {filename: "img/[hash][ext]",},},],},
};
//postcss.config.js
module.exports = {plugins: ["postcss-preset-env"],
};

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

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

相关文章

AWS被误扣费了，怎么解决？

AWS被误扣费了，怎么解决？

有时在使用aws时，可能会无意中被AWS扣费，对于如何处理这个问题，作为aws的合作伙伴，接下来由九河云进行讲解： （1）审查账单：首先，您需要仔细审查AWS账单，了解具…
阅读更多...
并发学习27--多线程 Tomcat 线程池

并发学习27--多线程 Tomcat 线程池

Tomcat连接器的线程池 socketProcessor也是个线程 Executor处理线程是按照JDK线程池方法处理，优先选用核心线程，再用救急线程，再去阻塞队列，最后采用拒绝策略。 Tomcat线程池与ThreadExecutorPool的区别 Tomcat中的配置 Tomcat …
阅读更多...
kafka快速入门+应用

kafka快速入门+应用

Kafka, 构建TB级异步消息系统 1.快速入门 1.1 阻塞队列 在生产线程 和 消费线程 之间起到了 ， 缓冲作用，即避免CPU 资源被浪费掉 BlockingQueue 解决 线程通信 的问题阻塞方法 put 、 take生产者、消费者 模式 生产者：产生数据的线程…
阅读更多...
登录加载动画

登录加载动画

实现登录中 … 三个点的loading动画 <template><div><el-input type"password" placeholder"请填写密码" autocomplete"new-password"v-model"password" keyup.enter.native"login" show-password clearable…
阅读更多...
Word中图表题注样式自动编号

Word中图表题注样式自动编号

需求 在写论文的时候&#xff0c;希望图表题注是下面的样子&#xff0c;其中图号表示为&#xff1a;章的编号-本章中图的序号&#xff0c;而且都是小写数字。 网上找的方法大多是使用 “插入题注” 来插入&#xff0c;此时章的编号是大写的&#xff0c;如“图一-1”。然后再通…
阅读更多...
后台权限控制及动态路由

后台权限控制及动态路由

需求 后台系统需要能实现不同的用户权限可以看到不同的功能。 用户只能使用他的权限所允许使用的功能。 功能设计 之前在我的SpringSecurity的课程中就介绍过RBAC权限模型。没有学习过的可以去看下 RBAC权限模型 。这里我们就是在RBAC权限模型的基础上去实现这个功能。 表分…
阅读更多...
Web前端-HTML

Web前端-HTML

黑马程序员JavaWeb开发教程 一、初识web前端 1、 标准也称为网页标准&#xff0c;由一系列的标准组成&#xff0c;大部分由W3C负责指定 2、 三个部分组成 HTML&#xff1a;负责网页的结构&#xff08;页面元素和内容&#xff09;CSS&#xff1a;负责网页的表现&#xff08;页…
阅读更多...
STL--pair 数对

STL--pair 数对

pair 数对&#x1f357; pair是一个模板类,使用时需要引用文件 #include <utility>//通用工具pair可将两个value处理为一个元素。C标准库内多处用到了这个结构。尤其容器 map、unordered_map和unordered_multimap就是使用pair来管理其内部元素(key_value),任何函数如果…
阅读更多...
ppt技巧：如何将Word文档大纲中导入到幻灯片中？

ppt技巧：如何将Word文档大纲中导入到幻灯片中？

在PowerPoint中&#xff0c;将Word文档的大纲导入到新的幻灯片是一种非常实用的技巧。以下是详细的步骤&#xff1a; 首先&#xff0c;需要打开PowerPoint软件并打开原始的幻灯片文件。 在PowerPoint的顶部【开始】菜单栏中&#xff0c;找到并点击“新建幻灯片”按钮&#xff0…
阅读更多...
【力扣】142. 环形链表 II

【力扣】142. 环形链表 II

142. 环形链表 II 题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&am…
阅读更多...
微信小程序全屏开屏广告

微信小程序全屏开屏广告

效果图 代码 <template><view><!-- 自定义头部 --><u-navbar title" " :bgColor"bgColor"><view class"u-nav-slot" slot"left"><view class"leftCon"><view class"countDown…
阅读更多...
Map相关面试答案（都是简单版

Map相关面试答案（都是简单版

一、HashMap的扩容机制 在1.7中 1、先生成新数组 2、遍历老数组中每个位置上的链表的所有节点 3、取每个节点的key&#xff0c;计算出每个元素在新数组中的下标&#xff0c;并添加到新数组中&#xff0c;这里用的是头插法。 4、转移完毕后将新数组复制给hashMap的table属性 1…
阅读更多...
Android OpenCV 概述、优缺点及应用场景分析

Android OpenCV 概述、优缺点及应用场景分析

摘要 随着移动设备性能的不断提升&#xff0c;安卓平台上的计算机视觉应用日益增多。OpenCV作为一个开源的计算机视觉库&#xff0c;在安卓开发中扮演了重要角色。本文将对安卓OpenCV进行概述&#xff0c;并深入探讨其优缺点以及在不同场景下的应用&#xff0c;为开发者提供参考…
阅读更多...
u盘为什么一插上电脑就蓝屏,u盘一插电脑就蓝屏

u盘为什么一插上电脑就蓝屏,u盘一插电脑就蓝屏

u盘之前还好好的&#xff0c;可以传输文件&#xff0c;使用正常&#xff0c;但是最近使用时却出现问题了。只要将u盘一插入电脑&#xff0c;电脑就显示蓝屏。u盘为什么一插上电脑就蓝屏呢?一般&#xff0c;导致的原因有以下几种。一&#xff0c;主板的SATA或IDE控制器驱动损坏…
阅读更多...
Unable to open connection to “Oracle, Microsoft provider V1.0.5000.0“

Unable to open connection to “Oracle, Microsoft provider V1.0.5000.0“

这是使用vs2018运行vb.net项目时遇到的问题&#xff0c;Navicat可以正常连接oracle但是项目启动却连接不了数据库报了这个错&#xff0c;网上找了很久&#xff0c;没有找到解决方案&#xff0c;最后发现是少了个东西叫 Oracle Client for Microsoft Tools 19c 官网下载地址&a…
阅读更多...
VUE中如何使用 JavaScript 变量来设置CSS变量，从而修改CSS属性 --color 的值

VUE中如何使用 JavaScript 变量来设置CSS变量，从而修改CSS属性 --color 的值

// Vue 组件&#xff08;组件名称&#xff1a;DataView&#xff09; <template><div :style"{ --mycolor: color }">这是一个带有自定义颜色的元素</div> </template><script setup lang"ts">const props defineProps({ tit…
阅读更多...
C语言处理文本模板：格式信函编程

C语言处理文本模板：格式信函编程

开篇 本篇文章的问题来源为《编程珠玑》第3章其中一个问题&#xff0c;格式信函编程。说白了就是先在文件中定义一个文本模版&#xff0c;然后使用数据库中的数据去填充这个模版&#xff0c;最后得到填充后的文本&#xff0c;并输出。 问题概要 在常去的网店键入你的名字和密码…
阅读更多...
Harmony鸿蒙南向驱动开发-SPI接口使用

Harmony鸿蒙南向驱动开发-SPI接口使用

功能简介 SPI指串行外设接口&#xff08;Serial Peripheral Interface&#xff09;&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线。SPI是由Motorola公司开发&#xff0c;用于在主设备和从设备之间进行通信。 SPI接口定义了操作SPI设备的通用方法集合…
阅读更多...
页表缓存TLB原理

页表缓存TLB原理

处理器的内存管理单元(Memory Management Uint&#xff0c;MMU)负责把虚拟地址转换成物理地址&#xff0c;为了加快虚拟地址到物理地址的转换速度&#xff0c;避免每次转换都需要查询内存中的页表&#xff0c;处理器厂商在MMU中增加了一个高速缓存TLB(Translation Lookaside Bu…
阅读更多...
算法练习第16天|101. 对称二叉树

算法练习第16天|101. 对称二叉树

101. 对称二叉树 力扣链接https://leetcode.cn/problems/symmetric-tree/description/ 题目描述&#xff1a; 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#x…
阅读更多...
最新文章

Copyright @ 2022~2023