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 must have webpack-dev-server write files to output directory during development, you can force it with the write-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
`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}`	`(content, path) => content`	Function 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

`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)
]

`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`

webpack.config.js

[
  new CopyWebpackPlugin([
    {
      from: 'src/*.png',
      to: 'dest/',
      transform (content, path) {
        return optimize(content)
      }
    }
  ], 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 --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

lampkid / copy-webpack-plugin-plus Goto Github PK