[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![test][test]][test-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]

src="https://webpack.js.org/assets/icon-square-big.svg">

Copy Webpack Plugin

Copies individual files or entire directories to the build directory

Install

``bash
npm i -D copy-webpack-plugin
`

Usage

webpack.config.js
`js
const CopyWebpackPlugin = require('copy-webpack-plugin')

const config = {
plugins: [
new CopyWebpackPlugin([ ...patterns ], options)
]
}
`

> ℹ️ If you must have webpack-dev-server write files to output directory during development, you can force it with the write-file-webpack-plugin.

$3

A simple pattern looks like this

`js
{ from: 'source', to: 'dest' }
`

Or, in case of just a from with the default destination, you can also use a {String} as shorthand instead of an {Object}

`js
'source'
`

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|from|{String\|Object}|undefined|Globs accept minimatch options|
|fromArgs|{Object}|{ cwd: context }|See the node-glob options in addition to the ones below|
|to|{String\|Object}|undefined|Output root if from is file or dir, resolved glob path if from is glob|
|toType|{String}||toType Options|
|test|{RegExp}||Pattern for extracting elements to be used in to templates|
|force|{Boolean}|false|Overwrites files already in compilation.assets (usually added by other plugins/loaders)|
|ignore|{Array}|[]|Globs to ignore for this pattern|
|flatten|{Boolean}|false|Removes all directory references and only copies file names.⚠️ If files have the same name, the result is non-deterministic|
|transform|{Function\|Promise}|(content, path) => content|Function or Promise that modifies file contents before copying|
|cache|{Boolean\|Object}|false|Enable transform caching. You can use { cache: { key: 'my-cache-key' } } to invalidate the cache|
|context|{String}|options.context \|\| compiler.options.context|A path that determines how to interpret the from path|

$3

webpack.config.js
`js
[
new CopyWebpackPlugin([
'relative/path/to/file.ext'
'/absolute/path/to/file.ext'
'relative/path/to/dir'
'/absolute/path/to/dir'
'*/'
{ glob: '\\/\*', dot: true }
], options)
]
`

$3

webpack.config.js
`js
[
new CopyWebpackPlugin([
{ from: '*/', to: 'relative/path/to/dest/' }
{ from: '*/', to: '/absolute/path/to/dest/' }
], options)
]
`

$3

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|'dir'|{String}|undefined|If from is directory, to has no extension or ends in '/'|
|'file'|{String}|undefined|If to has extension or from is file|
|'template'|{String}|undefined|If to contains a template pattern|

#### 'dir'

webpack.config.js
`js
[
new CopyWebpackPlugin([
{
from: 'path/to/file.txt',
to: 'directory/with/extension.ext',
toType: 'dir'
}
], options)
]
`

#### 'file'

webpack.config.js
`js
[
new CopyWebpackPlugin([
{
from: 'path/to/file.txt',
to: 'file/without/extension',
toType: 'file'
},
], options)
]
`

#### 'template'

webpack.config.js
`js
[
new CopyWebpackPlugin([
{
from: 'src/'
to: 'dest/[name].[hash].[ext]',
toType: 'template'
}
], options)
]
`

$3

Defines a {RegExp} to match some parts of the file path.
These capture groups can be reused in the name property using [N] placeholder.
Note that [0] will be replaced by the entire path of the file,
whereas [1] will contain the first capturing parenthesis of your {RegExp}
and so on...

webpack.config.js
`js
[
new CopyWebpackPlugin([
{
from: '/',
to: '[1]-[2].[hash].[ext]',
test: /([^/]+)\/(.+)\.png$/
}
], options)
]
`

$3

webpack.config.js
`js
[
new CopyWebpackPlugin([
{ from: 'src/*/' to: 'dest/', force: true }
], options)
]
`

$3

webpack.config.js
`js
[
new CopyWebpackPlugin([
{ from: 'src/*/' to: 'dest/', ignore: [ '*.js' ] }
], options)
]
`

$3

webpack.config.js
`js
[
new CopyWebpackPlugin([
{ from: 'src/*/', to: 'dest/', flatten: true }
], options)
]
`

$3

#### {Function}

webpack.config.js
`js
[
new CopyWebpackPlugin([
{
from: 'src/*.png',
to: 'dest/',
transform (content, path) {
return optimize(content)
}
}
], options)
]
`

#### {Promise}

webpack.config.js
`js
[
new CopyWebpackPlugin([
{
from: 'src/*.png',
to: 'dest/',
transform (content, path) {
return Promise.resolve(optimize(content))
}
}
], options)
]
`

$3

webpack.config.js
`js
[
new CopyWebpackPlugin([
{
from: 'src/*.png',
to: 'dest/',
transform (content, path) {
return optimize(content)
},
cache: true
}
], options)
]
`

$3

webpack.config.js
`js
[
new CopyWebpackPlugin([
{ from: 'src/*.txt', to: 'dest/', context: 'app/' }
], options)
]
`

Options

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|debug|{String}|'warning'|Debug Options|
|ignore|{Array}|[]|Array of globs to ignore (applied to from)|
|context|{String}|compiler.options.context|A path that determines how to interpret the from path, shared for all patterns|
|copyUnmodified|{Boolean}|false|Copies files, regardless of modification when using watch or webpack-dev-server. All files are copied on first build, regardless of this option|

$3

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|'info'|{String\|Boolean}|false|File location and read info|
|'debug'|{String}|false|Very detailed debugging info|
|'warning'|{String}|true|Only warnings|

#### 'info'

webpack.config.js
`js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ debug: 'info' }
)
]
`

#### 'debug'

webpack.config.js
`js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ debug: 'debug' }
)
]
`

#### 'warning' (default)

webpack.config.js
`js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ debug: true }
)
]
`

$3

webpack.config.js
`js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ ignore: [ '.js', '.css' ] }
)
]
`

$3

webpack.config.js
`js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ context: [ '/app' ] }
)
]
`

$3

> ℹ️ By default, we only copy modified files during a webpack --watch or webpack-dev-server build. Setting this option to true will copy all files.

webpack.config.js
`js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ copyUnmodified: true }
)
]
``

Maintainers

Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov

[npm]: https://img.shields.io/npm/v/copy-webpack-plugin.svg
[npm-url]: https://npmjs.com/package/copy-webpack-plugin

[node]: https://img.shields.io/node/v/copy-webpack-plugin.svg
[node-url]: https://nodejs.org

[deps]: https://david-dm.org/webpack-contrib/copy-webpack-plugin.svg
[deps-url]: https://david-dm.org/webpack-contrib/copy-webpack-plugin

[test]: https://secure.travis-ci.org/webpack-contrib/copy-webpack-plugin.svg
[test-url]: http://travis-ci.org/webpack-contrib/copy-webpack-plugin

[cover]: https://codecov.io/gh/webpack-contrib/copy-webpack-plugin/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/copy-webpack-plugin

[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack