CopyWebpackPlugin

Copies individual files or entire directories to the build directory.

Install

npm install --save-dev copy-webpack-plugin

Usage

new CopyWebpackPlugin([patterns], options)

A pattern looks like: { from: 'source', to: 'dest' }

Or, in the simple case of just a from with the default destination, you can use a string primitive instead of an object: 'source'

###

Name
Required
Default
Details
Name
from
Required
Y
Default
Details
examples:
'relative/file.txt'
'/absolute/file.txt'
'relative/dir'
'/absolute/dir'
'**/*'
{glob:'**/*', dot: true}

Globs accept minimatch options
Name
fromArgs
Required
N
Default
{ cwd: context }
Details
See the node-glob options in addition to the ones below.
Name
to
Required
N
Default
output root if from is file or dir

resolved glob path if from is glob
Details
examples:
'relative/file.txt'
'/absolute/file.txt'
'relative/dir'
'/absolute/dir'
'relative/[name].[ext]'
'/absolute/[name].[ext]'

Templates are file-loader patterns
Name
toType
Required
N
Default
'file' if to has extension or from is file

'dir' if from is directory, to has no extension or ends in '/'

'template' if to contains a template pattern
Details
Name
context
Required
N
Default
options.context ||compiler.options.context
Details
A path that determines how to interpret the from path
Name
flatten
Required
N
Default
false
Details
Removes all directory references and only copies file names

If files have the same name, the result is non-deterministic
Name
ignore
Required
N
Default
[]
Details
Additional globs to ignore for this pattern
Name
transform
Required
N
Default
function(content, path) {
  return content;
}
Details
Function that modifies file contents before writing to webpack
Name
force
Required
N
Default
false
Details
Overwrites files already in compilation.assets (usually added by other plugins)
Name
cache
Required
N
Default
false
Details
Enable transform caching. You can use { cache: { key: 'my-cache-key'} } to invalidate cache.

Available options:

Name
Default
Details
Name
context
Default
compiler.options.context
Details
A path that determines how to interpret the from path, shared for all patterns
Name
ignore
Default
[]
Details
Array of globs to ignore (applied to from)
Name
copyUnmodified
Default
false
Details
Copies files, regardless of modification when using watch or webpack-dev-server. All files are copied on first build, regardless of this option.
Name
debug
Default
'warning'
Details
options:
'warning' - only warnings
'info' or true - file location and read info
'debug' - very detailed debugging info

Examples

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

module.exports = {
    context: path.join(__dirname, 'app'),
    devServer: {
        // This is required for older versions of webpack-dev-server
        // if you use absolute 'to' paths. The path should be an
        // absolute path to your build destination.
        outputPath: path.join(__dirname, 'build')
    },
    plugins: [
        new CopyWebpackPlugin([
            // {output}/file.txt
            { from: 'from/file.txt' },

            // equivalent
            'from/file.txt',

            // {output}/to/file.txt
            { from: 'from/file.txt', to: 'to/file.txt' },

            // {output}/to/directory/file.txt
            { from: 'from/file.txt', to: 'to/directory' },

            // Copy directory contents to {output}/
            { from: 'from/directory' },

            // Copy directory contents to {output}/to/directory/
            { from: 'from/directory', to: 'to/directory' },

            // Copy glob results to /absolute/path/
            { from: 'from/directory/**/*', to: '/absolute/path' },

            // Copy glob results (with dot files) to /absolute/path/
            {
                from: {
                    glob:'from/directory/**/*',
                    dot: true
                },
                to: '/absolute/path'
            },

            // Copy glob results, relative to context
            {
                context: 'from/directory',
                from: '**/*',
                to: '/absolute/path'
            },

            // {output}/file/without/extension
            {
                from: 'path/to/file.txt',
                to: 'file/without/extension',
                toType: 'file'
            },

            // {output}/directory/with/extension.ext/file.txt
            {
                from: 'path/to/file.txt',
                to: 'directory/with/extension.ext',
                toType: 'dir'
            },

            // Ignore some files using glob in nested directory
            {
                from: 'from/directory',
                to: 'to/directory',
                ignore: ['nested/**/*.extension']
            }
        ], {
            ignore: [
                // Doesn't copy any files with a txt extension    
                '*.txt',

                // Doesn't copy any file, even if they start with a dot
                '**/*',

                // Doesn't copy any file, except if they start with a dot
                { glob: '**/*', dot: false }
            ],

            // By default, we only copy modified files during
            // a watch or webpack-dev-server build. Setting this
            // to `true` copies all files.
            copyUnmodified: true
        })
    ]
};

FAQ

"EMFILE: too many open files" or "ENFILE: file table overflow"

Globally patch fs with graceful-fs

npm install graceful-fs --save-dev

At the top of your webpack config, insert this

const fs = require('fs');
const gracefulFs = require('graceful-fs');
gracefulFs.gracefulify(fs);

See this issue for more details

This doesn't copy my files with webpack-dev-server

Starting in version 3.0.0, we stopped using fs to copy files to the filesystem and started depending on webpack's in-memory filesystem:

... webpack-dev-server will serve the static files in your build folder. It’ll watch your source files for changes and when changes are made the bundle will be recompiled. This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory.

If you must have webpack-dev-server write to your output directory, you can force it with the write-file-webpack-plugin.

Maintainers


      Juho Vepsäläinen



      Joshua Wiens



      Michael Ciniawsky



      Alexander Krasnoyarov