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，一经查实，立即删除！

相关文章

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

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

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

kafka快速入门+应用

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

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

需求 在写论文的时候，希望图表题注是下面的样子，其中图号表示为：章的编号-本章中图的序号，而且都是小写数字。 网上找的方法大多是使用 “插入题注” 来插入，此时章的编号是大写的，如“图一-1”。然后再通…
阅读更多...
Web前端-HTML

Web前端-HTML

黑马程序员JavaWeb开发教程 一、初识web前端 1、 标准也称为网页标准，由一系列的标准组成，大部分由W3C负责指定 2、 三个部分组成 HTML：负责网页的结构（页面元素和内容）CSS：负责网页的表现（页…
阅读更多...
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…
阅读更多...
u盘为什么一插上电脑就蓝屏,u盘一插电脑就蓝屏

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

u盘之前还好好的&#xff0c;可以传输文件&#xff0c;使用正常&#xff0c;但是最近使用时却出现问题了。只要将u盘一插入电脑&#xff0c;电脑就显示蓝屏。u盘为什么一插上电脑就蓝屏呢?一般&#xff0c;导致的原因有以下几种。一&#xff0c;主板的SATA或IDE控制器驱动损坏…
阅读更多...
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设备的通用方法集合…
阅读更多...
算法练习第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…
阅读更多...
品牌百度百科词条创建多少钱？

品牌百度百科词条创建多少钱？

百度百科作为国内最具权威和影响力的知识型平台&#xff0c;吸引了无数品牌和企业争相入驻。一个品牌的百度百科词条&#xff0c;不仅是对品牌形象的一种提升&#xff0c;更是增加品牌曝光度、提高品牌知名度的重要途径。品牌百度百科词条创建多少钱&#xff0c;这成为了许多企…
阅读更多...
玻璃生产线 Web 组态应用案例介绍

玻璃生产线 Web 组态应用案例介绍

玻璃生产线组态可视化 概述 随着工厂信息化、数字化发展&#xff0c;智慧生产车间成为必然发展趋势&#xff0c;通过智能硬件、物联网、大数据等智慧化技术与手段&#xff0c;提高车间生产设备、工艺设备的智能执行能力&#xff0c;从而提升整个车间乃至工厂的智能化、网络化与…
阅读更多...
【SpringBoot XSS存储漏洞 拦截器】Java纯后端对于前台输入值的拦截校验实现 一个类加一个注解结束

【SpringBoot XSS存储漏洞 拦截器】Java纯后端对于前台输入值的拦截校验实现 一个类加一个注解结束

先看效果&#xff1a; 1.js注入拦截&#xff1a; 2.sql注入拦截 生效只需要两步&#xff1a; 1.创建Filter类&#xff0c;粘贴如下代码&#xff1a; package cn.你的包命.filter; import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.IO…
阅读更多...
macos 查看 远程服务器是否开放某个端口

macos 查看 远程服务器是否开放某个端口

想要使用mac查看远程服务器某个端口是否开发&#xff0c;可通过 nc 命令&#xff0c;如下&#xff1a; nc -zv <服务器IP> <端口号>如果该端口开发&#xff0c;结果为&#xff1a;succeeded! Connection to <服务器IP> port <端口号> [类型] succeed…
阅读更多...
CLion 2024：为Mac与Win打造的卓越跨平台集成开发环境

CLion 2024：为Mac与Win打造的卓越跨平台集成开发环境

CLion 2024作为一款跨平台IDE&#xff0c;CLion 2024不仅完美支持Mac和Windows两大操作系统&#xff0c;更在细节之处展现了其出色的跨平台兼容性。无论你是在Mac的优雅界面下工作&#xff0c;还是在Windows的实用环境中编程&#xff0c;CLion 2024都能为你提供一致且流畅的开发…
阅读更多...
Day98：云上攻防-云原生篇K8s安全Config泄漏Etcd存储Dashboard鉴权Proxy暴露

Day98：云上攻防-云原生篇K8s安全Config泄漏Etcd存储Dashboard鉴权Proxy暴露

目录 云原生-K8s安全-etcd(Master-数据库)未授权访问 etcdV2版本利用 etcdV3版本利用 云原生-K8s安全-Dashboard(Master-web面板)未授权访问 云原生-K8s安全-Configfile鉴权文件泄漏 云原生-K8s安全-Kubectl Proxy不安全配置 知识点&#xff1a; 1、云原生-K8s安全-etcd未…
阅读更多...
Springboot实现链路追踪功能

Springboot实现链路追踪功能

前言 在日常开发中&#xff0c;一个业务的实现往往会调用很多个方法&#xff0c;当我们去看日志的时候&#xff0c;各种接口的日志打印出来&#xff0c;看着就头疼&#xff0c;压根没办法去定位&#xff0c;而链路追踪就能很好的帮助我们去查看接口从头至尾依次调用了哪些方法…
阅读更多...
MacOS13搭建安卓逆向环境

MacOS13搭建安卓逆向环境

MacOS中用apktool解包 这里是所有链接&#xff1a;123云盘下载 https://www.123pan.com/s/9QRqVv-JE7Y.html安装apktool https://apktool.org/docs/install/ 或者下载单独的jar包 brew install wgethttps://apktool.org/blog/apktool-2.9.3下载直链&#xff1a;https://co…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023