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]' }