webpack5.0中打包css背景图片生成重复，不能显示的问题考究

问题：利用webpack5.0以上版本进行背景图片打包，会出现打包图片重复的问题，并且背景图片无法正常显示.

测试过的正常配置如下：

webpack.config.js

const { resolve } = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    module: {
       rules: [
           {
               test: /\.(png|jpg|gif)$/i,
               use: [
                   {
                       loader: 'url-loader',
                       options: {
                           limit: 15000,//文件大小限制，小于则用base64编码
                           esModule: false //关闭es模块语法
                       }
                   }
               ],
               type: 'javascript/auto'
           },
           {
               test: /\.css$/i,
                use: ["style-loader", "css-loader"]
           }
       ]
    }
}

package.json:

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.2.0",
    "file-loader": "^6.2.0",
    "style-loader": "^3.2.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.48.0",
    "webpack-cli": "^4.7.2"
  }
}

背景图片参数：

 问题探究：

        当图片文件的大小小于limit属性值时，打包后的css会生成以base64编码的图片，当图片文件的大小大于limit属性时，打包后是会生成相应文件的。

        为什么会出现打包后的图片资源重复的问题？并且有一个图片正常，有一个是base64编码的图片，而这个base64编码的图片却是打包后的css的background的url中引用的。也正是由于打包后引用了这个base64编码的非正常图片,所以导致了打包后的背景图片无法正常显示。

 

根据webpack的官方文档，可知，webpack5以后，使用资源模块（asset module)，它允许使用资源文件，而无需配置额外的loader。详情如下

 因此会出现重复图片的问题在于：

我们在webpack5.0中使用了旧的资源模块加载器，如file-loader,url-loadre这些，但是webpack5.0本身已经内置了asset资源模块来处理，这就可能会导致asset重复。

解决方法：将asset的模块类型设置为 

type: 'javascript/auto'

 这样处理之后，打包后图片重复的问题可以解决。

 但是，此时背景图片依然无法正常显示

 

 原因为：url-loader,file-loader都是采用es6语法规范的，而不是commonjs规范

由于url-loader,file-loader中可以通过esModule属性来选择是否关闭es6语法规范，

故解决方法为添加如下语句关闭es6语法规范：

 esModule: false

通过以上两步可以成功解决问题：

 其实，如果install的是webpack5.0的话，正如前文所言，已经废弃了assert loader,(如 file-loader, url-loader等），就不需要那么麻烦，去相方设法配置版本的兼容性问题。可以直接如下操作，测试过也能正常在浏览器上显示背景图片。

 网上绝大多数的教程都是比较老的教程，安装时应该注意版本的兼容。在以后的学习，

希望自己要谨记一定要多看官方文档，官方文档，官方文档