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-server to write files to the output directory during development, you can force it with the <code>write-file-webpack-plugin</code>.

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
<code>from</code>	`{String\	Object}`	undefined
<code>fromArgs</code>	{Object}	{ cwd: context }	See the <code>node-glob</code> options in addition to the ones below
<code>to</code>	`{String\	Object}`	undefined
<code>toType</code>	{String}	``	toType Options
<code>test</code>	{RegExp}	``	Pattern for extracting elements to be used in to templates
<code>force</code>	{Boolean}	false	Overwrites files already in compilation.assets (usually added by other plugins/loaders)
<code>ignore</code>	{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
<code>transform</code>	`{Function\	Promise}`	(content, path) => content
<code>transformPath</code>	`{Function\	Promise}`	(targetPath, sourcePath) => path
<code>cache</code>	`{Boolean\	Object}`	false
<code>context</code>	{String}	`options.context \	\

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
<code>debug</code>	{String}	'warning'	Debug Options
<code>ignore</code>	{Array}	[]	Array of globs to ignore (applied to from)
<code>context</code>	{String}	compiler.options.context	A path that determines how to interpret the from path, shared for all patterns
<code>copyUnmodified</code>	{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
'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 --watch or webpack-dev-server build. Setting this option to true will copy all files.

webpack.config.js

[
  new CopyWebpackPlugin(
    [ ...patterns ],
    { copyUnmodified: true }
  )
]

Maintainers

Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov