webpack文件加载器重复文件

tmb3ates 于 2023-05-18 发布在 Webpack

关注(0)|答案(3)|浏览(223)

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

webpack

来源：https://stackoverflow.com/questions/66907267/webpack-file-loader-duplicates-files

3条答案

按热度按时间

3npbholx1#

经过长时间的搜索，我遇到了this SO问题，似乎非常类似于我的，然而，文件重复的原因是不同的。
在版本5中，webpack引入了Asset Modules作为raw-loader，url-loader和file-loader的替代品，现在默认运行：
资产模块是一种允许使用资产文件（字体，图标等）而无需配置其他加载器的模块。
每次webpack开始捆绑我的项目时，asset/resource和file-loader都在同时运行，导致重复。
最后，要解决这个问题，我所要做的就是从webpack.config.js文件中删除file-loader，并将output.assetModuleFilename设置为我想要的输出目录。

赞(0）回复(0）举报 2023-05-18

093gszye2#

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来压缩图像

赞(0）回复(0）举报 2023-05-18

yzuktlbb3#

就像@Daweed已经解释过的，文件被处理两次：一次由文件加载器执行，一次由资产模块执行。
如果由于某种原因您还没有准备好迁移到资产模块，您可以通过添加
type: 'javascript/auto'
到documentation中提到的文件加载器：