1.安装依赖
npm i style-loader css-loader url-loader file-loader -D
2.新建index.css
.box{
width: 100px;
height: 100px;
background: url('../images/1.jpg');
background-size: cover;
}
3.新建index.html
<html lang="en">
<head>
<title></title>
</head>
<body>
<div class="box"></div>
</body>
</html>
4.在main.js中引用index.css
import './css/index.css'
5.在webpack.config.js中配置
module: {
rules: [
//处理.css文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
//处理图片路径
{
test:/\.(jpg|png|gif|jpeg|bmp)$/,
use:'url-loader'
}
]
}
6.url-loader会把文件自动进行编码，如不需要base64可以设置limit属性配置字节大小小于指定数量在进行base64
{
test:/\.(jpg|png|gif|jpeg|bmp)$/,
//配置limit属性小于1000字节进行base64
use:'url-loader?limit=1000'
}
7.ur-loader生成的文件会自动重名，如不需重命名可配置name属性
{
test:/\.(jpg|png|gif|jpeg|bmp)$/,
//设置文件名称原名
use:'url-loader?name=[name].[ext]'
}
8.如出现根目录文件名相同覆盖问题可在文件名增加随即前缀
{
test:/\.(jpg|png|gif|jpeg|bmp)$/,
//设置原名输出并增加8为哈希前缀
use:'url-loader?name=[hash:8]-[name].[ext]'
}