webpack打包css

本文详细介绍了使用webpack打包css的全过程,包括引入css、配置webpack避免报错、将css打包成独立文件、添加样式前缀、进行格式校验和压缩css。讨论了使用webpack作为打包工具的原因以及webpack的打包顺序,帮助读者理解并掌握webpack在处理css时的配置和优化技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.打包css

2.打包逻辑

1-1.webpack打包css逻辑

 非js文件打包 需要对应的loader
 css-loader将css转化为js
 style-loader把包含css内容的js代码 挂载到页面的<style>标签
 引入css(import "./css/main.css")
 安装(npm i css-loader style-loader -D)
 配置后缀名 :test:/\.css$/i
 指定加载器 :use:['style-loader','css-loader']
 webpack打包css
 loader执行顺序:先右后左(先下后上)

3.打包css

在这里插入图片描述
先是创建一个main.css,我们在main.css写上我们自己所需要的样式
在这里插入图片描述
我们在切换到indx.js中把我们刚刚写的css样式引入到index.js里面
在这里插入图片描述
我们看到看到 报错 报错内容是我们的css不被识别 我们需要安装一个插件

npm i -D css-loader style-loader

在这里插入图片描述
我们安装好以后但是还是识别不了我们需要去做一个配置
在这里插入图片描述
这时我们在输入webpack就会发现没有报错了
在这里插入图片描述
你会发现这里面有我们刚写的css样式
在这里插入图片描述
我们创建一个新的文件夹 起名叫index.html 里面引入我们打包后的js

serve

打开项目
在这里插入图片描述
我们可以看到local 后面5000 打开以后

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值