模块化开发时遇到的问题——图片显示丢失的问题

在webpack.config.js中的图片处理规则配置如下：

        {
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                loader: "url-loader",
                options: {
                    //小于10K的转成base64编码
                    limit: 10240,
                    name: "picture/[name].[ext]",
                },
            },    

呈现出来的效果如下（图片并没有显示）

这主要是因为：

url-loader默认采用ES模块语法，即import '.../xxx.png';

然而Vue生成的是CommonJS模块语法，即require('.../xxx.png');二者不一致

解决办法：url-loader中的属性esModule选项能调整是否使用ES模块语法，将其值改为false，关闭ES模块语法。

　　　　　　{
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                loader: "url-loader",
                options: {
                    //小于10K的转成base64编码
                    limit: 10240,
                    name: "picture/[name].[ext]",
                    esModule: false,
                },
            },

运行结果：

 参考文章：webpack5用url-loader打包后出现图片打不开、资源重复_webpack5 css背景图片打不开-CSDN博客