webpack打包运行后运行成功但浏览器的css背景图片无法载入，404错误

Question

在vscode里使用webpack打包运行后浏览器的css背景图片无法显示
这是webpack.config.js文件配置内容：

const path = require('path')
module.exports = {
    //入口
    entry:'.c/main.js',
    output:{
              publicPath:'./',
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
        
    },
        module: {
          rules: [
            {
              test: /\.css$/,
                                        use: ['style-loader',  'css-loader' ]
            },
            {
              test: /\.less$/,
              use: [{
                  loader: "style-loader" // creates style nodes from JS strings
              }, {
                  loader: "css-loader" // translates CSS into CommonJS
              }, {
                  loader: "less-loader" // compiles Less to CSS
              }]
          },
          {
            test: /\.(png|jpg|gif|jpeg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 20000
                }
              }
            ]
          }
          ]
        }
      }

这是css文件内容：

这是浏览器控制台报错：