webpack5使用url-loader后出现图片打不开，资源重复问题

问题

使用webpack5进行图片资源打包时，打包后图片打不开，并且有重复的图片资源。

webpack配置情况

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            // loader配置
            {
                test: /\.less$/,
                // 要使用多个loader处理写成数组，这里就要写成use
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 处理图片资源
            {
                test: /\.(jpg|png|gif)$/,
                // 单个loader处理,这里就要写成loader
                loader: 'url-loader',
                options: {
                    // 当图片大小小于8kb，就会被base64处理
                    // base64优点：减少请求数量（减轻服务器压力）
                    // base64缺点：图片体积会更大（文件请求速度更慢）
                    limit: 10 * 1024
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: 'development'
};

解决

查询webpack官网中的url-loader
有这样一段描述：
当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 'javascript/auto' 来解决。
所以在使用每个loader的后面加上： type: 'javascript/auto'
即：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            // loader配置
            {
                test: /\.less$/,
                // 要使用多个loader处理写成数组，这里就要写成use
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 处理图片资源
            {
                test: /\.(jpg|png|gif)$/,
                // 单个loader处理,这里就要写成loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理
                    // 优点：减少请求数量(减轻服务器压力)
                    // 缺点：图片体积会更大(文件请求速度更慢)
                    limit: 10 * 1024
                },
                type: 'javascript/auto'
            },

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: 'development'
};

打包后效果

还是有问题，
url-loader默认采用ES模块语法，即import "…/XXXX.png"；
而Vue生成的是CommonJS模块语法，即require("…/example.png")；二者不一致。
两个解决办法：①让file-loader或url-loader采用CommonJS语法；②让Vue采用ES语法。
这里采用第①种方法：
在处理图片资源的loader中添加：
esModule: false

修改后的配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            // loader配置
            {
                test: /\.less$/,
                // 要使用多个loader处理写成数组，这里就要写成use
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 处理图片资源
            {
                test: /\.(jpg|png|gif)$/,
                // 单个loader处理,这里就要写成loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理
                    // 优点：减少请求数量(减轻服务器压力)
                    // 缺点：图片体积会更大(文件请求速度更慢)
                    limit: 10 * 1024,
                    esModule: false
                },
                type: 'javascript/auto'
            },

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: 'development'
};

结果