javascript - Webpack 并在保留文件结构的同时进行复制

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

我确实知道我可以将文件加载器上的上下文设置为指向特定目录，如下所示:

{
  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/ ',
    },
  },
},

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

Answer 1

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

您对 file-loader/img-loader 的使用不正确，loader 负责向 webpack 引入新的文件类型(基本上它们会转换 none-js类型转换为 js)。

简单用法:

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

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