Webpack copyFiles将文件从子目录复制到主目录答案

【问题标题】：Webpack copyFiles duplicating files from subdirectory into main directoryWebpack copyFiles将文件从子目录复制到主目录
【发布时间】：2020-03-04 14:28:53
【问题描述】：

我有一个图片目录如下：

在图标子目录中，我有 SVG 来组织结构。

在 webpack 中，我指定了以下内容：

.copyFiles({
     from: './assets/images',
     to: '[path][name].[hash:8].[ext]',
     context: './assets'
})

构建中发生的情况如下：

这里发生的是它复制目录中的所有图标并将其直接复制到图像目录中，同时也复制图标目录。它做了两次。发生这种情况有什么原因吗？如何确保它不会在 webpack 中复制内容两次？

【问题讨论】：

标签： javascript webpack webpack-encore

【解决方案1】：

你用什么来复制文件？

使用copy-webpack-plugin 并在路径中指定globs。看看this as a real working example

在您的情况下，您可以使用像 ./assets/images/**/* 这样的 glob 作为源，它应该可以按预期工作。

【讨论】：

我正在使用安可。这不起作用，因为它删除了目录。我不想删除图标目录。我只想删除基本图像文件夹中的重复项。

【解决方案2】：

对我在项目上运行了很长时间的图像尝试以下配置：

  {
    test: /\.(png|svg|jpe?g|gif|webp)$/,
    use: [ 
      {
          loader: 'file-loader',
          options: {
          name: '../img/[name].[ext]'
        }
      }
    ]
  },

它将图像复制到 ./img/ 文件夹

【讨论】：

您是否尝试过将文件加载器更改为已安装的文件加载器插件？还是安装文件加载器？
那么 webpack encore 就没有办法做到这一点了吗？
真的不知道，前段时间就搞砸了。只有带有 webpack 的遗留项目