安装

npm i -D copy-webpack-plugin

用法

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')

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

ℹ️ 如果你希望webpack-dev-server在开发过程中将文件写入输出目录，你可以关注 write-file-webpack-plugin 。

模式

一个简单的模式是这样的

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

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

或者，也可以简化不使用对象，只写一个字符串的作为 from 的默认值。

'source'

选项名	类型	默认值	描述
from	{String\|Object}	undefined	Globs接受 minimatch选项
fromArgs	{Object}	{ cwd: context }	除了下面的还可以参照 node-glob 选项
to	{String\|Object}	undefined	如果 from 是文件或者路径则返回路径，如果 from 是glob选项则解析glob路径
toType	{String}	“	toType 选项
test	{RegExp}	“	用于提取要在to模板中使用的元素的模式
force	{Boolean}	false	覆盖已经在compilation.assets中的文件（通常由其他插件/加载器添加）
ignore	{Array}	[]	要忽略这种模式的Globs
flatten	{Boolean}	false	删除所有目录引用，仅复制文件名。 ⚠️ 如果文件具有相同的名称，则结果是不确定的
transform	{Function\|Promise}	(content, path) => content	复制之前使用 Function 或 Promise 修改文件。
transformPath	{Function\|Promise}	(targetPath, sourcePath) => path	Function 或者 Promise 修改文件写入路径。
cache	{Boolean\|Object}	false	启用transform缓存。 您可以使用{cache：{key：'my-cache-key'}}来使缓存无效。
context	{String}	options.context \|\| compiler.options.context	确定如何解释from的路径

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

名称	类型	默认值	描述
'dir'	{String}	undefined	如果from是目录，to没有扩展名或以/’结尾
'file'	{String}	undefined	如果to有扩展名或from是文件
'template'	{String}	undefined	如果to包含 模板模式

'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

定义{RegExp}以匹配文件路径的某些部分。 可以使用[N]占位符在name属性中重用这些捕获组。 请注意，[0]将替换为文件的整个路径，而[1]将包含{RegExp}的第一个捕获括号，依此类推……

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/',
      transformPath (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)
]

选项

选项	类型	默认值	描述
debug	{String}	'warning'	Debug 选项
ignore	{Array}	[]	要忽略的数组 (应用到 from)
context	{String}	compiler.options.context	确定如何解释from的路径, 所有模式都有效
copyUnmodified	{Boolean}	false	使用watch或webpack-dev-server时，无论修改如何，都会复制文件。 无论此选项如何，所有文件都在第一次构建时复制。

debug

名称	类型	默认值	描述
'info'	{String\|Boolean}	false	文件位置和读取信息
'debug'	{String}	false	非常详细的调试信息
'warning'	{String}	true	只是警告信息

'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

ℹ️ 在使用webpack --watch 或者webpack-dev-server 构建的时候，默认只是复制修改的 文件。设置为 true的时候就复制所有的文件。

webpack.config.js

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

 

译文：内容来源于 https://github.com/webpack-contrib/copy-webpack-plugin