webpack5打包 CSS 背景图片问题

今天无意将webpack从低版本升级到了webpack5，结果打包出来的css背景图片打不开了，css文件如下：

.box {
    width: 100px;
    height: 100px;
    background-image: url("./avatar.png");
    background-size: contain;
}

因为图片资源webpack不支持，所以需要额外配置loader来处理，以下是图片对应的loader配置：

{
  test: /\.(jpe?g|png|gif|svg)$/i,
  loader: "url-loader",
  options: {
    //不超过8kb的图片资源会被转换成base64
    limit: 8 * 1024,
  },
}

然后执行打包命令，页面根本不显示图片，这个原因是url-loader、file-loader都是采用es6语法规范的，而不是commonjs规范，由于url-loader、file-loader中可以通过esModule属性来选择是否关闭es6语法规范。其实官网也说了在webpack5中也不再推荐使用file-loader、url-loader，但是如果还想使用这两个loader打包css背景图片的话，需要在webpack.config.js文件中做如下配置：

{
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: {
    loader: "url-loader",
    options: {
      //不超过8kb的图片资源
      limit: 8 * 1024,
      esModule: false,
    },
  },
  type: "javascript/auto",
}

最主要的就是两段代码配置：esModule: false和type: 'javascript/auto'，这个配置适用于在webpack5中使用file-loader和url-loader。