安装对应的loader,加载图片安装的file-loader,命令如下
npm install file-loader --save-dev
在webpack.config.js中添加如下配置：
module:{
rules:[
...,
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '../img/[name].[ext]?[hash]' //../img是文件存储位置，name是文件名
} ,
]
在style.css文件，添加内容如下：
#q1{
background-image:url(../../img/tu1.png);
width: 130px;
height: 260px;
}
#q2{
background-image: url(../../img/tu2.png);
width: 230px;
height: 160px;
}
在index.html,添加内容如下:
<div id="q1"></div>
<div id="q2"></div>
在命令行中，输入命令如下：
webpack
在浏览器中，打开index.html,就可以看到效果。
本次说明到此结束，希望能帮助看到的朋友
