CopyWebpackPlugin copy contents of a directory into the output directory

Question

I want to use CopyWebpackPlugin to copy all the files from a public/ directory to the dist/ directory. However, I need to set my output path as dist/ earlier in the configuration file. Here is my setup:

webpack.config.js

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

module.exports = {
  entry: path.resolve('src/App.jsx'),
  output: {
    filename: 'js/index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'public/**/*' },
    ]),
  ],
  ...
};

This is copying the entire public/ directory into dist/. Instead, I'd like to copy the files and directories within public/ to dist/. Is there a way to do this without individually listing each file?

Answer 1

As always, my own stupidity never ceases to amaze me. I just replaced { from: 'public/**/*' } with { from: 'public' } and it worked like a charm.

Answer 2

Extending OP's answer.

CopyWebpackPlugin doesn't override the directory. If it encounters two folders that conflict, it merges their content in the destination directory. We can use this to achieve the desired result.

new CopyWebpackPlugin({
  from: dir.root("public")
})

This will attempt to copy the folder named public to the destination. Since they are folders, their content will be merged.