Webpack CopyPlugin add nested directories and files

Question

What is the pattern for adding all nested directories and files of said nested directories in Webpack CopyPlugin?

directory
-- subdirectory-1
---- file-1.ext
-- subdirectory-2
---- file-2.ext

desired build output

lib
-- directory
---- subdirectory-1
------ file-1.ext
---- subdirectory-2
------ file-2.ext

I've tried this in webpack CopyPlugin config:

    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src/styles/directory"),
          to: "./lib/styles/directory/[folder]/[name][ext]",
        },
      ],
    }),

score 0 · Accepted Answer · answered Jul 28 '23 at 08:43

From to option documentation, just specify a relative path to it.

E.g.

project structure:

$ tree -L 5 -I node_modules
.
├── dist
│   ├── lib
│   │   └── dir
│   │       ├── sub-1
│   │       │   └── file-1.txt
│   │       └── sub-2
│   │           └── file-2.txt
│   └── main.js
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── styles
│       └── dir
│           ├── sub-1
│           │   └── file-1.txt
│           └── sub-2
│               └── file-2.txt
└── webpack.config.js

10 directories, 9 files

webpack.config.js:

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

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        clean: true,
    },
    plugins: [
        new CopyPlugin({
            patterns: [{ from: path.resolve(__dirname, './src/styles'), to: 'lib' }],
        }),
    ],
};

Build logs:

> webpack

asset lib/dir/sub-1/file-1.txt 2 bytes [compared for emit] [from: src/styles/dir/sub-1/file-1.txt] [copied]
asset lib/dir/sub-2/file-2.txt 2 bytes [compared for emit] [from: src/styles/dir/sub-2/file-2.txt] [copied]
asset main.js 0 bytes [compared for emit] [minimized] (name: main)
./src/index.js 1 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 153 ms

package.json:

{
    "version": "1.0.0",
    "scripts": {
        "build": "webpack"
    },
    "devDependencies": {
        "copy-webpack-plugin": "^11.0.0",
        "webpack": "^5.80.0",
        "webpack-cli": "^5.0.2"
    }
}

Webpack CopyPlugin add nested directories and files

1 Answers1