Webpack打包css文件的背景图路径错误以及多生成了图片

module.exports = {
    entry:'.src/index.js',
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.webp$/,
                use:[{
                    loader:'file-loader',
                    options:{
                        name:'image/[name].[hash:4].[ext]'
                    }
                }]
            }
        ]
    }
}

还没有打包前

打包后：

在图片文件加外多生成了一个图片文件，这不符合我们的预期，

module.exports = {
    entry:'.src/index.js',
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
             {
        test:/\.(jpe?g|png|gif|webp)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false,//file-loader默认使用es6模块解析，如果使用es6的模块解析，html中图片的路径会不对，关闭es6模块解析开启commonjs模块解析
              name: 'images/[name].[hash:6].[ext]',
            }
          }
        ],
        type: 'javascript/auto'//这个属性如果没有设置，则会生成两张图片(如果你的页面只引入了一张图片)
      }
        ]
    }
}

 只要在options里添加一个属性esModule:false和在rules对象中添加type:'javascript/auto'就不会出现这种情况了，这两个属性的作用在代码的注释中有写到。

在进行一次打包后，就不会有问题了