复制 Webpack 插件模式以维护文件夹结构

Question

我正在使用 thge copy-webpack-plugin for webapck 将文件从我的 src 文件夹复制到 dist 文件夹。我希望该过程在这样做时保持文件夹结构。

我的文件夹结构如下：

|- 源代码 |-组件 |- 我的组件 |-view.html

我希望插件只将组件文件夹中的html文件复制到dist文件夹中，维护上面的文件夹结构。

到目前为止，我已经完成了以下工作：

const path = require('path');
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
    ...
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "./src/components/*/*.html", to: "[name].html" },
            ],
        }),
    ],
};

以上只是简单的将html文件复制到dist文件夹中，原来的文件夹结构丢失了。

我需要获取 html 所在的文件夹名称，并在“to”模式中使用它。

这个可以吗？

Answer 1

请参阅CopyWebpackPlugin Documentation 中的此示例。

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "**/*",
          to: "[path][name].[ext]",
          context: "src/"
        },
      ],
    }),
  ],
};

src/ 是这里的相对路径。要使用以斜杠 (/src/) 开头的绝对路径。

更新：我更改了代码示例以适应您的情况。