Webpack – CopyWebpackPluginを使ってファイルをソースからパブリックにコピーする

Webpackを使っているアプリがあります。このアプリでは、ソースディレクトリのさまざまなディレクトリからパブリックディレクトリの同じ階層に静的な.htmlファイルをコピーする必要があります。これを試みるために、私は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ファイルは、そのディレクトリも含めてパブリックディレクトリに正常にコピーされます。ただし、コピーすると、ソースディレクトリ名が含まれます。たとえば、ディレクトリ構造が次のようになっているとします。

/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

コピー元ディレクトリがコピー先にどのように含まれているかに注目してください。なぜこれが含まれているのかわかりません。もっと重要なことに、私はそれを削除する必要があります。ターゲット内のパスからソースディレクトリを削除する方法

ベストアンサー
あなたはcontextパラメータを使用することができます。

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

転載記事の出典を記入してください: Webpack – CopyWebpackPluginを使ってファイルをソースからパブリックにコピーする - コードログ