打包css资源
加载css资源需要安装style-loader，css-loader库
配置如下：
module: {
rules: [
// 在rules中写详细的loader配置
// 打包css资源
{
// 正则表达式,匹配那些文件，匹配以.css结尾的文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签，将js的样式资源插入进去，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串。
'css-loader'
]
}
]
},注意：
use数组中loader执行顺序：从右到左，从下到上，依次执行。
示例：
//index.html
<body>
<div>webpack5学习</div>
<!-- 注释 -->
<div>html压缩</div>
<div class="box1"></div>
</body>
//index.js中引入css文件
import './css/style1.css'
function add(a, b) {
return a + b;
}
console.log(add(1, 3))
//css文件
.box1 {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px;
}
执行webpack命令
可以看到编译了css文件
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
