webpack 文件加载器重复文件

Posted 2023-02-22

【中文标题】webpack 文件加载器重复文件

【英文标题】：webpack file-loader duplicates files

【发布时间】：2021-06-28 14:44:30

【问题描述】：

我正在使用 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

【问题讨论】：

您能在导入这些图像的位置显示 .html 或 .js 文件吗？捆绑前img1.png 和img2.png 存储在哪里？

@superhawk610 图像存储在img/ 目录中的src/ 目录中。我正在使用src 属性导入它们：<img src="./img/img1.png">。

【参考方案1】：

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

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

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

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

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

【讨论】：

我正要问同样的问题。然后我找到了你的。谢谢！

是的，这是正确的答案，我遇到了同样的问题，谢谢兄弟

就是这样。谢谢！

【参考方案2】：

webpack.prod.js（开发配置不需要压缩图片）

...
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = 
    mode: 'production',
    entry: './src/index.js',
    output: 
        filename: 'assets/app.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
        assetModuleFilename: 'img/[name][ext][query]' // dont use [hash] in name
    ,
    module: 
        rules: [
            
                test: /\.(jpe?g|png|gif|svg)$/i,
                type: "asset/resource"
            
        ],
    ,
    plugins: [
        new ImageMinimizerPlugin(
            minimizerOptions: 
                plugins: [
                    ["mozjpeg",  quality: 60 ],
                    ["pngquant",  quality: [0.6, 0.8] ],
                ],
            ,
        )
    ]
;

webpack5 使用Asset Modules type replaces all of these loaders，并使用image-minimizer-webpack-plugin 压缩图片

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

添加了配置示例@Mousam Singh