Webpack - 使用 CopyWebpackPlugin 将文件从源复制到公共(public)

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

您可以使用context参数。

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