Webpack 生成重复图像答案

【问题标题】：Webpack generates duplicate imagesWebpack 生成重复图像
【发布时间】：2021-11-20 15:57:33
【问题描述】：

我有一个问题，Webpack 生成重复图像，而其中一个重复图像损坏了。

我有一个图像image，并从中生成了两个副本，一个工作的：image，一个不工作的：image。我在 CSS 中为一个类 .logo 我正在挂背景图像样式：image。编译代码后，它插入到非工作图像的路径：image，我不明白这是怎么回事:(

请帮我解决，提前谢谢！！！

我的 webpack.config.js：

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: './index.js',
        analytics: './analytics.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HTMLWebpackPlugin({
            title: 'Webpack Tenzo',
            template: './index.html'
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                use: ['file-loader']
            }
        ]
    }
}

【问题讨论】：

我认为这很好，因为前端只会加载一个。我不确定另一张图片是做什么用的，但不应该在前端加载。
@illiteratewriter 不太明白你的意思。在 CSS 中，路径会导致额外的副本被破坏，我认为这没有任何好处。我需要解决这个问题，但还是谢谢你！
你试过这个解决方案了吗？ stackoverflow.com/questions/66907267/…
我解决了这个问题。关键是有必要使用“资产”而不是“文件加载器”等领导者

标签： javascript css webpack

【解决方案1】：

我解决了这个问题。关键是必须使用“资产”而不是“文件加载器”等领导者。

【讨论】：