| .. | ||
| node_modules | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
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  |