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 的用法不正确，加载器是负责将新文件类型引入 webpack 的加载器（基本上它们将 none-js 类型转换为 js） .

简单用法：

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

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

Webpack 和复制同时保留文件结构

Webpack and copy while retaining file structure

javascript

webpack

webpack-2

webpack-file-loader