文件加载器创建 2 个图像并链接错误的图像

Question

file-loader 正在我的构建文件夹中创建两个单独的图像。一个命名正确并保存在正确的路径中，另一个命名为 [hash].png（默认）并存储在构建中，而不是 build/images。第二个不正确的文件是0字节；这是构建文件夹中最终 index.html 文件中被 link 编辑的那个。我已经定义了 outputPath 和 publicPath。 publicPath 似乎并没有实际做任何事情，不管我放在那里。我是不是误解了它的作用？

module.exports = {
    entry: {
        index: './app/main.js',
        vendor: './app/vendor.js'
    },
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].[contenthash].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/, /api/, /tests/, /coverage/],
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.(svg|png|jpg|gif)$/,
                use:{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'images/',
                        publicPath: 'images/'
                    }
                }
            },
        ]        
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './app/index.html' }), 
        new CleanWebpackPlugin()
    ]
};

最终图像 link html:

<img src="465107fe07e3ec18a463.png">

另一个 post 有同样的问题但没有得到任何答案： Webpack, I am trying to use file loader to load images but whenever i run build i get 2 images not 1 and the one linking to the html file is wrong

Answer 1

我终于明白了。从 Webpack 5.0 开始，这可以在根本不安装加载器的情况下处理。所以 file-loader、url-loader、raw-loader 等现在已经过时了。

https://webpack.js.org/guides/asset-modules/

Answer 2

        {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
        },

文件加载器创建 2 个图像并链接错误的图像

File-loader creating 2 images and linking the wrong one

html

image

webpack

webpack-file-loader

file-loader