webpack 文件加载器复制文件

Question

我正在使用 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，但我相信它们不会导致问题。

版本：

• 网络包 5.28.0
• 文件加载器 6.2.0
• html加载器 2.1.2

Answer 1

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

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

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

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

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