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

问题描述

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

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

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

分布/

结果

这是background-image: "../images/image.svg"在src/styles/app.css中添加的结果，我的图像位于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中的散列图像格式不正确，当我打开它们时，它们会导致错误，即它们为空。
我曾尝试评论图像优化器，例如压缩图像以及之前列出的其他加载器和插件，但这并没有改变。

谢谢你

标签： imagewebpackbuildfrontendassets

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

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

有关为什么会发生这种情况的更多详细信息

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

问题描述

解决方案

推荐阅读