Webpack5 file-loader、url-loader打包url引入一张图片生成两个图片，一个无法加载

最近在学习webpack5
Webpack5 file-loader、url-loader打包url引入的图片生成两个图片，一个无法加载。
但是页面引入的却是这个无法加载的图片

就算是使用了file-loader的outputPath，也会发现，生成的无效图片并不会进入到outputPath中指定的路径里面。

问题原因：

css-loader版本不同。
css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由css-loader解析引入）

解决方案一：
将css-loader版本由6降到5就行了

解决方案二：
官方推荐使用asset module 资源模块替换loader

转自官网：javascript
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

解决方案三：
如果你还想使用url-loader 那么你只需要在url-loader中设置type: 'javascript/auto’即可；

同样的对于页面上的图片的引入我们之前的方法是使用css-loader并且要将url-loader的esModule设置为false，因为我们现在的css-loader引入图片使用的是commonjs，而url-loader默认使用es6模块化解析，如果不设置为false打包后的图片路径会出现 [object Module]。

{
  test: /\.(png|jpg|jpeg|gif|svg)$/,
  use: [
    {
      loader: "url-loader",
      options: {
        name: "[name].[hash:6].[ext]",
        outputPath: "img",
        limit: 100 * 1024,
        esModule: false,
      }
    }
  ],
  type: 'javascript/auto'
}