webpack打包生成多余图片的解决方案、export default __webpack_public_path__

今天学习webpack时候遇到一个问题：配置url-loader后竟然没效果，而且生成了两个图片，但是其中一个图片内容竟然是代码

这个问题困扰了我一整天了，虽然网上找到有人（仅且只有一个人）跟我遇到同样的错误，但他的解决方法根本不适合我。

我才发现其实是因为我的webpack版本的原因，我现在用的是webpack5

"webpack": "^5.53.0",

 "webpack-cli": "^4.8.0"

而在webpack5文档上有这么一些话

这是因为webpack5提供了资源模块的原因，所以跟原来的冲突了。

按照官方的提示，最后只需要给url-loader修改为如下即可

```js

{

               test: /\.(png|jpg|gif)$/,

                use: [

                    {

                        loader: 'url-loader',

                        options: {

                            // name: '[name].[ext]',

                            limit: 8192,

                            esModule:false

                        }

                    }

                ],

                type: 'javascript/auto'

            }

```

可能你看到我在上面的options当中添加了一个esModule：false。这是因为在这里我还要提一点：不要把css-loader当中的options.url设置为false 否则根本无法处理url

这是因为webpack先用css-loader将url(../resource/1.png) 解析为url(require('./resource/1.png'))最后url-loader遇到后才能进行处理，但是url-loader默认用es6的模块语法进行解析，如果没有设置esModule为false 那么将出现下面这种情况

对的，这里因为无法被解析，所以直接输出来了。为了让url-loader能够解析这个commonjs规范的模块，只需要将esModule设置为false即可。

喜欢的可以给个赞哈~