webpack 5 background-image 图片引入问题

最初的时候因为没仔细阅读文档，所以沿用的4.0的写法。
然后发现scss里的background能引入不报错，但是展示不出来，但是tsx文件能正常引入。
最初以为是scss的问题，尝试了resolve-url-loader，并没用，后来老大查文档才发现重点，在此记录下。

image.png

'javascript/auto' 有尝试过，并没有成功，也不知道是不是写法问题

webpack4.0的写法

    rules: [
      {
        oneOf: [
          {
            test: /\.(png|gif|jpg|jpeg|svg|woff|ttf|eot)$/,
            resourceQuery: /\?.*/,
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
          {
            test: /\.(png|gif|jpg|jpeg|svg|woff|ttf|eot)$/,
            loader: 'file-loader',
            options: {
              name: '[name][hash:21].[ext]',
            },
          },
        ],
],

webpack5.0的写法

重点：wepack5.0去掉了url-loader 和 file-loader
webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。

rules: [
       {
         test: /\.(png|gif|jpg|jpeg|svg|woff|ttf|eot)$/i,
         resourceQuery: /\?.*/,
         type: 'asset/inline',  
       },
      {
        test: /\.(png|gif|jpg|jpeg|svg|woff|ttf|eot)$/i,
        type: 'asset/resource',
        type: 'asset',
       },

或者

  rules: [
      {
        test: /\.(png|gif|jpg|jpeg|svg|woff|ttf|eot)$/i,
        type: 'asset',
      },
  ]

BTW

MiniCssExtractPlugin.loader不要和style-loader一起用，会报错

参考：

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