为什么 Webpack 会复制图像和散列格式错误的图像答案

【问题标题】：Why Webpack is duplicating images & hashing malformed images为什么 Webpack 会复制图像和散列格式错误的图像
【发布时间】：2021-10-18 12:59:53
【问题描述】：

我正在使用 Webpack 构建我的项目，但不知何故它构建了两次图像：

在 dist/images/ 文件夹中，构建正确。
再次在构建目录的根目录中，即 /dist 具有错误的散列名称。

然后将这些错误的散列名称分配给包含图像 URL 的元素。例如如果图像是 CSS 背景图像，则会将错误的名称设置为其 URL，而不是正确的名称。

dist/

结果

这是在 src/styles/app.css 中添加background-image: "../images/image.svg" 的结果 我的图片位于 src/images/image.svg。

webpack.config.js

modules: {
    // CSS
    {
      test: /\.css$/i,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: "../images/", //to be able to use url images in my styles
          },
        },
        { loader: "css-loader", options: { importLoaders: 1 } },
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [autoprefixer({ supports: false })],
            },
          },
        },
      ],
    },

    //SASS
    {
      test: /\.s[ac]ss$/i,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: "../images/", //to be able to use url images in my styles
          },
        },
        { loader: "css-loader", options: { importLoaders: 1 } },
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [autoprefixer({ supports: false })],
            },
          },
        },
        "sass-loader",
      ],
    },

    //Images
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[name].[ext]",
            outputPath: "images/",
            publicPath: "images/",
          },
        },

        //Compress Images
        {
          loader: "image-webpack-loader",
        },
      ],
    },
},
plugins: [
  new MiniCssExtractPlugin({
    filename: "styles/[name].css",
  }),
  new ImageMinimizerPlugin({
    minimizerOptions: {
      plugins: [
        ["jpegtran", { progressive: true }],
        ["optipng", { optimizationLevel: 5 }],
        [
          "svgo",
          {
            plugins: [
              {
                removeViewBox: false,
              },
            ],
          },
        ],
      ],
    },
  }),
]

注意事项：

/dist 中的散列图像格式不正确，当我打开它们时，它们会导致错误，即它们为空。
我曾尝试评论图像优化器，例如压缩图像以及之前列出的其他加载器和插件，但这没有任何改变。

谢谢

【问题讨论】：

标签： image webpack build frontend assets

【解决方案1】：

问题在于在新的 webpack 版本中使用 file-loader，所以我完全删除了 file-loader 并依赖于新的 webpack 资产管理系统，并修复了散列的 webpack 图像名称，我使用：

output: {
 ...
 assetModuleFilename: "[name][ext]",
},

More details 为什么会发生这种情况

【讨论】：