javascript - 为什么我有图像/图标的散列副本

Question

我在创建 webpack 配置时遇到了一些问题。我刚刚安装了 copy-webpack-plugin 和 file-loader。第一个用于从资产中复制一些人员，另一个用于处理图像。因此，当我运行构建或运行项目时，我会在 dist 目录中收到 2 个图像和图标副本。这两个插件都可以正常工作，我得到了 favicon.ico 的复制版本，并复制了 img dir，其中包含文件。此外，我得到了另一个图像副本，在 dist 目录中散列。所以我不知道，为什么会发生这种情况以及如何摆脱散列图像。

webpack 配置：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");

const isDev = process.env.NODE_ENV === "development";
const isProd = !isDev;

const fileName = ext => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;

module.exports = {
    context: path.resolve(__dirname, "src"),
    mode: "development",
    entry: "./js/index.js",
    output: {
        filename: `./js/${fileName("js")}`,
        path: path.resolve(__dirname, "dist"),
        publicPath: ""
    },
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, "dist"),
        open: true,
        compress: true,
        hot: true,
        port: 3030
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, "src/index.html"),
          filename: "index.html",
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: `./css/${fileName("css")}`,
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "src", "assets"),
                    to: path.resolve(__dirname, "dist"),
                }
            ]
        })
    ],
    module: {
        rules: [
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: isDev
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', "sass-loader"],
            },
            {
                test: /\.(?:|gif|png|jpg|jpeg|svg|webp)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: `./img/${fileName("[ext]")}`
                    }
                }]
            }
        ]
    }
}

脚本：

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --mode production",
    "dev": "cross-env NODE_ENV=development webpack --mode development",
    "start": "cross-env NODE_ENV=development webpack serve --mode development"
  },

运行npm start dev/build我得到 2 对图像，第一个是散列的，另一个是由 img 目录中的文件加载器复制的。 我如何摆脱散列？favicon 也是如此，首先是散列，另一个是由 copy-plugin 复制的。这是日志的图像：

标签： javascriptnode.jsnpmwebpack