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'
};

結果