Question

我目前正在为一个新项目设置一个webpack工作流程，但我仍然难以理解如何在保留旧文件夹结构的同时复制图像。

例如，我在/src/img/folder/name/01.png

下有图像

将以下规则与webpack一起使用，可以将所有图像直接存放到/ dist / img /文件夹中，而无需考虑文件夹结构。

{
  test: /\.(jpg|png|svg/gif)$/,
  exclude: [/node_modules/, /font/, /fonts/],
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'img/',
      publicPath: 'img/ ',
    },
  },
},

据我所知，我确实告诉webpack这样做，但是，我尝试阅读文件加载器文档并发现我可以使用[path]将图像存入其相关文件夹，但随后他们最终在/dist/img/src/img/folder/name/01.png

我知道我可以在file-loader上设置上下文指向特定目录，如下所示：

{
  test: /\.(jpg|png|svg|gif)$/,
  exclude: [/node_modules/, /font/],
  use: {
    loader: 'file-loader',
    options: {
      context: './src/vendors/mylib/img/',
      name: '[path][name].[ext]',
      outputPath: 'img/',
      publicPath: 'img/ ',
    },
  },
},

但这似乎非常多余。是否有更简单的方法从我和我依赖的库中的各种/ img /文件夹中获取webpack复制图像，同时仍保留复制文件的文件夹结构？

Answer 1

您可以使用copy-webpack-plugin将文件从一个位置复制到另一个位置。

您对file-loader / img-loader的使用不正确，加载程序负责向webpack引入新文件类型（基本上它们将none-js类型转换为js）。

简单用法：

const CopyWebpackPlugin = require('copy-webpack-plugin')

const config = {
  plugins: [
    new CopyWebpackPlugin([ ...patterns ], options)
  ]
}

Webpack并复制，同时保留文件结构

1 个答案: