webpack5零基础入门-3使用webpack处理样式资源

news/2024/5/30 18:27:53/文章来源:https://blog.csdn.net/weixin_45636198/article/details/136606978

1.不使用css-loader直接进行打包

1.1创建css文件

.red{color: red;
}

 在main.js中引入(不进行引入不会进行打包,因为打包的入口是main.js)

import sum from "./js/sum";
import count from "./js/count";
//要想webpack打包资源,必须引入该资源
import "./css/file.css"
console.log(count(1, 2));
console.log(sum(1, 2, 3, 4, 5))

执行npx wepack

报错无法识别file.css,需要loader来处理css文件类型

2.安装css-loader

2.1安装loader

css-loader文档 ​​https://webpack.docschina.org/loaders/css-loader/​​

npm install --save-dev css-loader

2.2配置规则loader

  /**加载器 */module: {rules: [//loader的配置{/**test 代表要检测的文件 */test: /\.css$/i, //只检测.css文件use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader}]},

rules数组中的每个对象表示一个规则

test表示要检测的文件

use表示对检测到的文件使用哪些loader

use的执行顺序是从右到左,在后面的loader先执行

css-loader:将css资源编译成commonJs资源到JS中

style-loader:将js中的css通过创建style标签的形式添加到html文件中

执行npx webpack命令

可以看到css文件被创建成style标签了

在html文件中使用样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webpack</title>
</head>
<body><script src="../../dist/dist.js"></script><h1>hell webpack</h1><div class="red"></div>
</body>
</html>

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

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

相关文章

安卓项目:app注册/登录界面设计

目录 第一步&#xff1a;设计视图xml 第二步&#xff1a;编写登录和注册逻辑代码 运行效果展示&#xff1a; 总结&#xff1a; 提前展示项目结构&#xff1a; 第一步&#xff1a;设计视图xml 在layout目录下面创建activity_login.xml和activity_main.xml文件 activity_lo…

12 list的使用

文档介绍 文档介绍 1.list是可以在常数范围内的任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代 2.list的底层是带头双向链表循环结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和…

罐头鱼AI短视频矩阵获客|AI视频批量生成

罐头鱼AI传单功能操作说明&#xff0c;智能化提升您的视频营销效率&#xff01; 在这个信息爆炸的时代&#xff0c;短视频已成为企业营销的重要方式之一。而为了更高效地进行视频营销&#xff0c;罐头鱼AI传单功能应运而生&#xff0c;为您提供全方位的视频管理和发布服务。 首…

7、设计模式之桥接模式(Bridge)

一、什么是桥接模式 桥接模式是一种结构型设计模式。它将抽象部分和实现部分分离&#xff0c;使它们可以独立地变化。 二、角色组成 抽象部分&#xff08;Abstraction&#xff09;&#xff1a;定义了抽象部分的接口&#xff0c;并包含对实现部分的引用。 实现部分&#xff08;…

WordPress建站入门教程:如何创建菜单和设置前端导航菜单?

前面我们跟大家分享了WordPress如何上传安装WordPress主题&#xff0c;但是启用主题后前端没有看到有导航菜单&#xff0c;这是因为我们还没有创建菜单和设置导航菜单。 JianYue主题导航菜单和右上角菜单 今天boke112百科就继续跟大家分享WordPress站点如何创建菜单和设置前端…

day36 贪心算法part5

435. 无重叠区间 中等 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠 。 气球问题稍加改动就可ac 一个交叉区间里&#xff0c;最终只能保留一个&#xff0c;其他的全部要去掉。…

欧科云链:角力Web3.0,香港如何为合规设线?

在香港拥抱Web3.0的过程中,以欧科云链为代表的合规科技企业将凸显更大重要性。 ——据香港商报网报道 据香港明报、商报等媒体报道&#xff0c;港区全国政协兼香港选委界立法会议员吴杰庄在日前召开的全国两会上提出在大湾区建设国际中小企业创新Web3融资平台等提案&#xff0…

Solidity攻击合约:重入攻击与危害分析

以太坊智能合约开发中&#xff0c;重入攻击是一种常见的安全漏洞。这种攻击通常发生在合约的递归调用中&#xff0c;攻击者通过构造恶意交易&#xff0c;使得原本合约在执行过程中不断调用自身或其他合约&#xff0c;从而耗尽合约的Gas&#xff08;交易费用&#xff09;&#x…

STM32(18)I2C

串口通信缺点 一个设备就需要一个串口&#xff0c;单片机可能没有那么多串口外设 总线/非总线 主机&#xff1a;负责管理总线&#xff0c;可控制波特率、数据的通信方向 波特率&#xff1a;由主机产生波特率信号 数据的传输 每个从机都有7位地址&#xff0c;最后移位是读&a…

django学习记录07——订单案例(复选框+ajax请求)

1.订单的数据表 1.1 数据表结构 1.2 数据表的创建 models.py class Order(models.Model):"""订单号"""oid models.CharField(max_length64, verbose_name"订单号")title models.CharField(max_length64, verbose_name"名称&…

Hack The Box-Codify

目录 信息收集 rustscan nmap dirsearch WEB 提权 get user get root 信息收集 rustscan ┌──(root㉿ru)-[~/kali/hackthebox] └─# rustscan -b 2250 10.10.11.239 --range0-65535 --ulimit4500 -- -A -sC .----. .-. .-. .----..---. .----. .---. .--. .-. …

Long-term Correlation Tracking LCT 目标跟踪算法源码运行

资源 LCT-tracker项目地址VLFeat官网OpenCV下载地址OTB50数据集百度网盘资源 参考博客 一步一步教你跑lct-tracker&#xff08;Win10Matlab 2016bVisual Studio 2015&#xff09;LCT代码跑起来先文章思路总结 正文 1. 环境配置 我的环境&#xff1a;Win11、Visual Studio…

LF253DT运算放大器芯片中文资料规格书PDF数据手册引脚图图片参数价格功能

产品概述&#xff1a; 这些电路是高速JFET输入双运算放大器&#xff0c;在单片集成电路中集成了匹配良好的高压JFET和双极晶体管。 这些器件具有高转换速率、低输入偏置和失调电流以及低失调电压温度系数。 产品功能&#xff1a; 无闩锁操作内部频率补偿低功耗低输入偏置和…

JS数组相关知识

获取数组的最大值/最小值&#xff1a; let arrary [2,5,4] let max arrary[0] for(let i 0;i<arrary.length;i){if(arrary[i]>max){max arrary[i]} }console.log(max);//查询数组最小值let arr [2,21,34,23,45] let min arr[0] for(let i 0;i<arr.length;i){if…

24考研调剂 | 武汉纺织大学

教育部重点实验室招收24年调剂生&#xff0c;材料、化学、机械工程、计算机、力学等相关专业 考研调剂招生信息 学校:武汉纺织大学 专业:工学->材料科学与工程 年级:2024 招生人数:100 招生状态:正在招生中 联系方式:********* (为保护个人隐私,联系方式仅限APP查看)…

JavaEE:网络编程

网络编程&#xff1a;通过代码完成基于网络的跨主机通信 跨主机通信方式&#xff1a; 1.TCP/IP网络 2.蓝牙通信 3.近场通信NFC 4.毫米波通信&#xff1a;功率高&#xff0c;带宽高&#xff0c;抗干扰能力差 其中TCP/IP网络是日常编程中最常涉及到的&#xff0c;最通用的跨主机通…

吴恩达机器学习-可选实验:使用ScikitLearn进行线性回归(Linear Regression using Scikit-Learn)

文章目录 实验一目标工具梯度下降加载数据集缩放/规范化训练数据创建并拟合回归模型查看参数作出预测绘制结果 恭喜 实验二目标工具线性回归&#xff0c;闭式解加载数据集创建并拟合模型查看参数作出预测 第二个例子恭喜 有一个开源的、商业上可用的机器学习工具包&#xff0c;…

day42 动态规划part4

先遍历物品还是先遍历背包二刷再考虑吧。累了&#xff0c;不想停留太久。 背包问题 二维 &#xff08;卡码网题目&#xff09; 各种解释&#xff1a; 要理解的是这个表格每一个格子都是当前所处情况的最大价值&#xff0c;我们用已经推导出的最大价值来推导当前情况的最大价值…

用chatgpt写论文重复率高吗?如何降低重复率?

ChatGPT写的论文重复率很低 ChatGPT写作是基于已有的语料库和文献进行训练的&#xff0c;因此在写作过程中会不可避免地引用或借鉴已有的研究成果和观点。同时&#xff0c;由于ChatGPT的表述方式和写作风格与人类存在一定的差异&#xff0c;也可能会导致论文与其他文章相似度高…

LiveGBS流媒体服务器中海康摄像头GB28181公网语音对讲、语音喊话的配置

LiveGBS海康摄像头国标语音对讲大华摄像头国标语音对讲GB28181语音对讲需要的设备及服务准备 1、背景2、准备2.1、服务端必备条件&#xff08;注意&#xff09;2.2、准备语音对讲设备2.2.1、不支持跨网对讲示例2.2.2、 支持跨网对讲示例 3、开启音频开始对讲4、搭建GB28181视频…