webpack5打包图片背景图片文件出现的问题

• 在webpack5中file-loder和url-loader已经被弃用，如果想要继续使用url-loader和file-loader时，可以通过将模块类型设置为’javascript/auto’.
• 第二个问题：url-loader默认采用ES模块语法，即import './'的形式，如果想使用commonjs规范的话 则需要在option中配置esModule：false

{
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        //当图片大小 小于limit时，则将图片转成base64字符串形式
                        limit: 3000,
                        esModule: false
                    }
                }],
                type: 'javascript/auto'
            }

webpack5最新通过添加 4 种新模块类型来替换所有这些加载器loader：

1. asset/resource发出一个单独的文件并导出 URL。以前可以通过使用file-loader.
2. asset/inline导出资产的数据 URI。以前可以通过使用url-loader.
3. asset/source导出资产的源代码。以前可以通过使用raw-loader.
4. asset自动在导出数据 URI 和发出单独的文件之间进行选择。以前可以通过使用url-loader资产大小限制来实现。

//下面这段代码等同于上面的配置
{
                test: /\.(png|jpg|gif|jpeg)$/i,
                type: 'asset/inline'
            }