10

我正在使用 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/目录中图像的不需要的重复项。正如您在上面的示例中看到的，我什至没有将名称设置为散列，我也无法以任何方式打开重复文件。

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

版本：

  • 网页包5.28.0
  • 文件加载器6.2.0
  • html-loader2.1.2
4

2 回答 2

12

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

在版本 5 中，webpack 引入了Asset Modules来替代raw-loader,url-loader并且file-loader现在默认运行：

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

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

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

于 2021-04-02T14:41:02.773 回答
0

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 类型替换所有这些加载器，并使用image-minimizer-webpack-plugin来压缩图像

于 2021-08-25T03:12:27.060 回答