Webpack -使用CopyWebpackPlugin将文件从源复制到公开

Question

我有一个应用程序，我正在使用Webpack。在这个应用程序中，我需要将一些静态.html文件从source目录中的不同目录复制到public目录中的相同层次结构中。为了做到这一点，我使用了CopyWebpackPlugin。此时，我的webpack.config.js文件如下所示：

webpack.config.js

const path = require('path');
const projectRoot = path.resolve(__dirname, '../');

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

module.exports = {
  entry: {
    app: './source/index.html.js',
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].package.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: ['style-loader','css-loader']        
      },
    ]
  },
  plugins: [
    new CopyWebpackPlugin(
      [ { from: './source/**/*.html', to: './public', force:true } ],
      { copyUnmodified: true }
    )
  ]
};

当我从命令行运行webpack时，一切都按我的意愿工作。这些HTML文件被成功地复制到public目录中，包括它们的目录。但是，在复制时，将包括源目录名称。例如，如果我的目录结构是这样的：

/source
  /dir-1
    /child-a
      index.html
      page.html
    /child-b
      index.html
      contact.html
  /dir-2
    index.html

我期望CopyWebpackPlugin的结果输出到以下内容：

预期：

/public
  /dir-1
    /child-a
      index.html
      page.html
    /child-b
      index.html
      contact.html
  /dir-2
    index.html

然而，我真正得到的是：

实数：

/public
  /source
    /dir-1
      /child-a
        index.html
        page.html
      /child-b
        index.html
        contact.html
    /dir-2
      index.html

注意source目录是如何包含在复制目标中的。我不明白为什么要包括这件事。更重要的是，我需要移除它。如何从目标路径中删除source目录？

Answer 1

您可以使用上下文 param。

new CopyWebpackPlugin(
    [{
        context: './source/',
        from: '**/*.html',
        to: './public',
        force: true
    }], {
        copyUnmodified: true
    }
)

Answer 2

我用了名字变量。

patterns: [
    { from: "src/*.svg",    to: '[name].svg'},
]

Answer 3

我能够将文件夹src/pages/Content/lib复制到文件夹build/lib，并保持原始结构，配置如下：

    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/pages/Content/lib',
          to({ context, absoluteFilename }) {
            return path.join(__dirname, 'build', 'lib', path.relative(context, absoluteFilename));
          },
        },
      ],
    }),

我正在使用webpack 5.23和拷贝webpack-plugin 7。

下面的示例页面帮助我了解如何配置插件：https://webpack.js.org/plugins/copy-webpack-plugin/#copy-in-new-directory

请注意，在from和to旁边，可以添加属性force: true和info: { minimized: true }，以覆盖以前的文件，并且不对这些文件执行最小化操作