下载url-loader，用limit指定图片大小后，显示不出图片

下载打包处理样式中与url路径相关的包

npm i url-loader file-loader -D

添加url-loader规则，没有报错

module: {
    rules: [
      {
        test: /\.jpg|png|gif$/,  
        use: ['url-loader],
      }
    ]
  }

加入limit，来指定图片的大小时，图片不能显示

module: {
    rules: [
      {
        test: /\.jpg|png|gif$/,  
        use: ['url-loader?limit=22228'],
      }
    ]
  }

解决步骤：

1.查看浏览器Console是否有报错------未报错

2.重新运行npm run dev，查看终端是否报错-------未报错

3.查看webpack官网搜索Asset Modules ，查询到：

在 webpack 5 之前，通常使用：

• raw-loader将文件作为字符串导入 
• url-loader将文件作为数据 URI 内联到包中
• file-loader将文件发送到输出目录

在 webpack 5 中使用旧的资产加载器（即raw-loader/url-loader/file-loader)

• asset/inline导出资产的数据 URI。以前可以通过使用url-loader.
• asset自动在导出数据 URI 和发出单独文件之间进行选择。以前可以通过使用url-loader资产大小限制来实现。
• 在 webpack 5 中使用旧的assets loaders （即file-loader/ url-loader/ raw-loader）和 asset's module 时，您可能希望阻止assets loaders 再次处理您的assets，因为这会导致assets重复。这可以通过将asset's module type设置为 来完成'javascript/auto'。

---

总而言之，就是如果想用webpack5，但是又不想更改旧的loader配置文件,要用旧的loader来完成当前任务，可以 加type: 'javascript/auto'来实现。

加了type: 'javascript/auto' 后，不会报错，但是还是不会显示图片。

module: {
    rules: [
      {
        test: /\.jpg|png|gif$/, 
        use: ['url-loader?limit=22228'],
      }
    ],
  type: 'javascript/auto'
  }

4.在Asset Modules页面有url-loader，点击进入可以看见关于url-loader的一些用法 ，

用排除法，可以除去一些知道意思，并且没有用的设置选项，

limit:可以通过加载程序选项指定限制，默认为无限制。

boolean:启用或禁用将文件转换为 base64。

...

最后，无解。

5.查询浏览器Console报错情况，第一次没显示，刷新后，显示错误信息。

6. 看报错信息查找问题，

（1）寻找index.html:38----------无错误，我只有30行代码，没有38行

（2）查找get是否成功----------全文件无get，没有报错

（3）找寻最后的关键字---------[object%20Module],在webpack官网搜索object module无解

（4)  返回4，在4中有看见esModule（都有module，也在url-loader范围内）

默认情况下，file-loader生成使用 ES 模块语法的 JS 模块。在某些情况下，使用 ES 模块是有益的，例如在模块连接和摇树的情况下。

您可以使用以下方法启用 CommonJS 模块语法：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              esModule: false,
            },
          },
        ],
      },
    ],
  },
};

7.看不懂，但是放入代码中试了一下，发现会显示图片且不会报错。

8.最后百度搜索了一下问题[object Module]，确认猜想正确，得出：

esModule: false 可以解决图片不显示的问题。

解决结论：

加esModule: false                                                                                                                   -_-