README.md 9.9 KB
Copy Webpack Plugin
Copies individual files or entire directories to the build directory
Install
npm i -D copy-webpack-plugin
Usage
webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')
const config = {
plugins: [
new CopyWebpackPlugin([ ...patterns ], options)
]
}
ℹ️ If you want
webpack-dev-serverto write files to the output directory during development, you can force it with thewrite-file-webpack-plugin.
Patterns
A simple pattern looks like this
{ 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}
'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 |
transformPath |
{Function\|Promise} |
(targetPath, sourcePath) => path |
Function or Promise that modifies file writing path |
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 |
from
webpack.config.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)
]
to
webpack.config.js
[
new CopyWebpackPlugin([
{ from: '**/*', to: 'relative/path/to/dest/' },
{ from: '**/*', to: '/absolute/path/to/dest/' }
], options)
]
toType
| 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
[
new CopyWebpackPlugin([
{
from: 'path/to/file.txt',
to: 'directory/with/extension.ext',
toType: 'dir'
}
], options)
]
'file'
webpack.config.js
[
new CopyWebpackPlugin([
{
from: 'path/to/file.txt',
to: 'file/without/extension',
toType: 'file'
},
], options)
]
'template'
webpack.config.js
[
new CopyWebpackPlugin([
{
from: 'src/',
to: 'dest/[name].[hash].[ext]',
toType: 'template'
}
], options)
]
test
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
[
new CopyWebpackPlugin([
{
from: '*/*',
to: '[1]-[2].[hash].[ext]',
test: /([^/]+)\/(.+)\.png$/
}
], options)
]
force
webpack.config.js
[
new CopyWebpackPlugin([
{ from: 'src/**/*', to: 'dest/', force: true }
], options)
]
ignore
webpack.config.js
[
new CopyWebpackPlugin([
{ from: 'src/**/*', to: 'dest/', ignore: [ '*.js' ] }
], options)
]
flatten
webpack.config.js
[
new CopyWebpackPlugin([
{ from: 'src/**/*', to: 'dest/', flatten: true }
], options)
]
transform
{Function}
webpack.config.js
[
new CopyWebpackPlugin([
{
from: 'src/*.png',
to: 'dest/',
transform (content, path) {
return optimize(content)
}
}
], options)
]
{Promise}
webpack.config.js
[
new CopyWebpackPlugin([
{
from: 'src/*.png',
to: 'dest/',
transform (content, path) {
return Promise.resolve(optimize(content))
}
}
], options)
]
transformPath
{Function}
webpack.config.js
[
new CopyWebpackPlugin([
{
from: 'src/*.png',
to: 'dest/',
transformPath (targetPath, absolutePath) {
return 'newPath';
}
}
], options)
]
{Promise}
webpack.config.js
[
new CopyWebpackPlugin([
{
from: 'src/*.png',
to: 'dest/',
transform (targePath, absolutePath) {
return Promise.resolve('newPath')
}
}
], options)
]
cache
webpack.config.js
[
new CopyWebpackPlugin([
{
from: 'src/*.png',
to: 'dest/',
transform (content, path) {
return optimize(content)
},
cache: true
}
], options)
]
context
webpack.config.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 |
debug
| 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
[
new CopyWebpackPlugin(
[ ...patterns ],
{ debug: 'info' }
)
]
'debug'
webpack.config.js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ debug: 'debug' }
)
]
'warning' (default)
webpack.config.js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ debug: true }
)
]
ignore
webpack.config.js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ ignore: [ '*.js', '*.css' ] }
)
]
context
webpack.config.js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ context: '/app' }
)
]
copyUnmodified
ℹ️ By default, we only copy modified files during a
webpack --watchorwebpack-dev-serverbuild. Setting this option totruewill copy all files.
webpack.config.js
[
new CopyWebpackPlugin(
[ ...patterns ],
{ copyUnmodified: true }
)
]
Maintainers
Juho Vepsäläinen
|
Joshua Wiens
|
Michael Ciniawsky
|
Alexander Krasnoyarov
|