Webpack CopyPlugin add nested directories and files

359 views Asked by At

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]",
        },
      ],
    }),
1

There are 1 answers

0
Lin Du On BEST ANSWER

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"
    }
}