关于webpack5配置url-loader问题

跟着coderwhy老师自学vue,再配置url-loder时，发现一直没办法显示背景图片，后来上网查询，在满足coderwhy老师所讲，安装了url-loader和file-loader之后，再跟着老师添加publicPath:'dist/'后（添加file-lloader后可以删除ublicPath:'dist/'的配置），在浏览器发现，路径匹配的图片，是npm run build运行和=后出现的两张中的不能解析的一张，为了解决问题，我去搜了相关资料，参考：(2条消息) webpack5用url-loader打包后出现图片打不开、资源重复_ChrisJin的博客-CSDN博客

    mode: 'production',
    entry: './src/main.js',
    output: {
        // 动态的获取路径path resolve拼接路径
        path: path.resolve(__dirname, 'dist'), // node上下文自带的全局变量 __dirname
        filename: 'bundle.js',
        publicPath: 'dis/'
    },

简单来说就是需要再添加的url-loader文件中的option中添加esModule:false,在use同级后面添加type:'javascript/auto',然后就能显示了。具体原理参考上面链接。

            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 30000,
                        esModule: false
                    }
                }],
                type: 'javascript/auto'
            },

在进行配置时出现的小问题：

1. 如果在进行此步之前，遇到：

The 'mode' option has not been set, webpack will fallbaenerated

此时只需要在webpack.config.js文件中添加    mode: 'production' 即可，在启动webpack的时候定义环境

module.exports = {
    mode: 'production',
    entry: './src/main.js',

2. 如果终端报出：Module build failed: Error: Cannot find module 'file-loader' 问题，则只需要把添加到webpack.config.js中的url-loader文件中option中的limit的数值改大就可以了。计算方式是图片大小*1024

  {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 30000,
                        esModule: false
                    }
                }],
                type: 'javascript/auto'
            },