webpack 文件加载器复制文件

问题描述

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

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

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

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

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

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

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

版本：

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

解决方法

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

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

资产模块是一种模块，它允许人们在不配置额外加载器的情况下使用资产文件（字体、图标等）。

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

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