webpack.config配置加载图片

安装对应的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,就可以看到效果。
本次说明到此结束，希望能帮助看到的朋友