webpack 文件加载器复制文件 [英] webpack file-loader duplicates files

问题描述

我正在使用 webpack，它是 file-loader + html-loader 将文件发送到我的输出目录中.它几乎按预期工作，因为它还会复制这些文件.

I'm using webpack and it's file-loader + html-loader to emit files into my output directory. It works almost as expected, because it also duplicates those files.

这是我的 webpack.config.js 文件的一部分:

Here is a part of my webpack.config.js file:

module.exports = {
   module: {
      rules: [
         { test: /\.html$/, use: ["html-loader"] },
         {
            test: /\.(jpg|png)$/,
            use: {
               loader: "file-loader",
               options: {
                  name: "[name].[ext]",
                  outputPath: "img",
               },
            },
         },
      ],
   },
};

有一个小例子说明了我的输出目录的样子:

There is a small example of how my output directory looks like:

dist/
- img/
   - img1.png
   - img2.png
- ab0d12.png
- c3d612.png
- index.html
- bundle.js

带有散列名称的两个图像是 img/ 目录中不需要的重复图像.正如您在上面的示例中看到的，我什至没有将名称设置为散列，而且我也无法以任何方式打开重复文件.

The two images with hashed names are unwanted duplicates of those in img/ directory. As you can see in the example above, I'm not even setting the name to be hashed and I also cannot open the duplicate files in any way.

我正在使用一些插件，例如 HtmlWebpackPlugin 或 CleanWebpackPlugin，但我相信它们不会导致问题.

I'm using some plugins like HtmlWebpackPlugin or CleanWebpackPlugin, but I believe they are not causing the problem.

版本:

• webpack 5.28.0
• 文件加载器6.2.0
• html-loader 2.1.2

推荐答案

经过长时间的搜索，我发现了 this SO 问题似乎与我的非常相似，但是，文件重复的原因不同.

After a long searching I came across this SO question that seemed very similar to mine, however, the cause of the file duplication were different.

在第 5 版中，webpack 引入了 Asset Modules 作为 的替代品raw-loader、url-loader 和 file-loader 现在默认运行:

In version 5, webpack introduced Asset Modules as a replacement for raw-loader, url-loader and file-loader and which are now ran by default:

资产模块是一种模块，允许用户在不配置额外加载器的情况下使用资产文件(字体、图标等).

Asset Modules is a type of module that allows one to use asset files (fonts, icons, etc) without configuring additional loaders.

每次 webpack 开始打包我的项目时，asset/resource 和 file-loader 同时运行，导致重复.

Every time webpack started bundeling my project, asset/resource and file-loader were running at the same time and resulted into duplication.

最终，为了解决我的问题，我所要做的就是从 webpack.config.js 文件中删除 file-loader 并设置一个 output.assetModuleFilename 到我想要的输出目录.

Eventually, all I had to do to fix my problem was to remove the file-loader from the webpack.config.js file and set a output.assetModuleFilename to my desire output directory.

这篇关于webpack 文件加载器复制文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！