Webpack - Copying Files from source to public using CopyWebpackPlugin

Question

I have an app in which I'm using Webpack. In this app, I need to copy some static .html files from various directories in my source directory to the same hierarchy in the public directory. In an attempt to do this, I'm using the CopyWebpackPlugin. At this time, my webpack.config.js file looks like this:

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 }
    )
  ]
};

When I run webpack from the command line, everything works as I want. The HTML files are successfully copied, including their directories, into the public directory. However, when copied, the source directory name is included. For example, if my directory structure is like this:

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

I'm expecting the result of CopyWebpackPlugin to output to the following:

expected:

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

However, what I'm actually getting is:

actual:

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

Notice how the source directory is included in the copy target. I don't understand why this is being included. More importantly, I need to remove it. How do I remove the source directory from the path in the target?

Answer 1

You can use context param.

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

Answer 2

I have used name variable.

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

Answer 3

I was able to copy the folder src/pages/Content/lib to the folder build/lib and keep the original structure with the following configuration:

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

I am using webpack 5.23 and copy-webpack-plugin 7

The following example page helped me understand how to configure the plugin: https://webpack.js.org/plugins/copy-webpack-plugin/#copy-in-new-directory

note that next to from and to, you could add the properties force: true and info: { minimized: true } to override the previous files and don't execute minimization on these