Webpack并复制，同时保留文件结构-Java 学习之路

我目前正在为一个新项目设置一个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复制图像，同时仍保留复制文件的文件夹结构？

1 回答

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)
  ]
}
```
回复于 2024-04-27T09:15:28+08:00

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

1 回答

相关问题