1. Copy Webpack Plugin

1.1. 安装

npm install --save-dev copy-webpack-plugin

1.2. 用法

new CopyWebpackPlugin(patterns, options)

1.2.1. patterns

类型：array

模式数组

一个模式的样子: { from: 'source', to: 'dest' }

或者，在简单的情况下，仅指定一个from，使用默认目的地。您可以使用简单字符串而不是对象: 'source'

模式属性:

名称	是否必须	默认值	细节
`from`	Y		例如: 'relative/file.txt' '/absolute/file.txt' 'relative/dir' '/absolute/dir' '*/' {glob:'*/', dot: true} Globs 接收 minimatch options
`to`	N	如果 `from` 是一个文件或者目录，输出root 如果 `from` 是 glob，已解决的glob路径	例如: 'relative/file.txt' '/absolute/file.txt' 'relative/dir' '/absolute/dir' 'relative/[name].[ext]' '/absolute/[name].[ext]' 模板是 file-loader patterns
`toType`	N	为'文件' ，如果`to` 有扩展或者`from`是文件为'目录'，如果 `from` 是目录, `to` 不包含扩展或者末尾是 '/' 为'template' ，如果 `to`包含一个模板模式
`context`	N	`options.context` 或 `compiler.options.context`	一个决定如何解释`from`路径的路径
`flatten`	N	false	删除所有的目录引用，并且只复制文件名。如果文件具有相同的名称，则结果是不确定的
`ignore`	N	`[]`	对于这种模式，忽略的额外globs
`transform`	N	function(content, path) { return content; }	在写入webpack之前修改文件内容的函数
`force`	N	false	重写已经在compilation.assets中的文件(通常由其他插件添加)

可用的选项:

名称	默认值	细节
`context`	compiler.options.context	一个决定如何说明`from`路径的路径，为所有模式所共享
`ignore`	`[]`	忽略的glob数组 (应用于 `from`)
`copyUnmodified`	false	复制文件，不考虑什么时候使用watch或webpack-devserver。所有文件都是在第一个构建中复制的，不管这个选项是什么。
`debug`	'warning'	选项: 'warning' - 仅警告 'info' 或者 true - 文件地址和读取信息 'debug' - 非常详细的调试信息

1.2.2. 示例

var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');

module.exports = {
    context: path.join(__dirname, 'app'),
    devServer: {
        // 这是webpack-dev-server的旧版本所需要的
        // 如果你使用绝对的'to' 路径。路径应该是通往您的构建目的地的绝对路径。
        outputPath: path.join(__dirname, 'build')
    },
    plugins: [
        new CopyWebpackPlugin([
            // {output}/file.txt
            { from: 'from/file.txt' },

            // 等效
            'from/file.txt',

            // {output}/to/file.txt
            { from: 'from/file.txt', to: 'to/file.txt' },

            // {output}/to/directory/file.txt
            { from: 'from/file.txt', to: 'to/directory' },

            // 拷贝目录内容到 {output}/
            { from: 'from/directory' },

            // 拷贝目录内容到 {output}/to/directory/
            { from: 'from/directory', to: 'to/directory' },

            // 拷贝 glob 结果到 /absolute/path/
            { from: 'from/directory/**/*', to: '/absolute/path' },

            // 拷贝 glob (和 dot 文件) 到 /absolute/path/
            {
                from: {
                    glob:'from/directory/**/*',
                    dot: true
                },
                to: '/absolute/path'
            },

            // 拷贝 glob 结果, 相对于 context
            {
                context: 'from/directory',
                from: '**/*',
                to: '/absolute/path'
            },

            // {output}/file/without/extension
            {
                from: 'path/to/file.txt',
                to: 'file/without/extension',
                toType: 'file'
            },

            // {output}/directory/with/extension.ext/file.txt
            {
                from: 'path/to/file.txt',
                to: 'directory/with/extension.ext',
                toType: 'dir'
            }
        ], {
            ignore: [
                // 不拷贝任何带txt扩展的文件
                '*.txt',

                // 不要复制任何文件，即使它们从一个点开始
                '**/*',

                // 不复制任何文件，除非他们以一个点开始
                { glob: '**/*', dot: false }
            ],

            // 默认情况下，我们只在观察或webpack-dev-server构建期间复制修改过的文件。将此设置为`true`复制所有文件。
            copyUnmodified: true
        })
    ]
};

1.2.3. 常见问题

"EMFILE: too many open files" or "ENFILE: file table overflow"

使用 graceful-fs全局补丁

npm install graceful-fs --save-dev

在您的webpack配置文件的顶部，插入这个

var fs = require('fs');
var gracefulFs = require('graceful-fs');
gracefulFs.gracefulify(fs);

参见 this issue 获取更多细节

This doesn't copy my files with webpack-dev-server（使用webpack-devserver时不会复制我的文件）

从版本 3.0.0开始, 我们停止使用fs来拷贝文件到文件系统，并且开始依赖于webpack的in-memory filesystem:

... webpack-dev-server 服务于你的构建文件夹的静态文件。它将监视您的源文件的更改，将重新编译包。这个修改后的包是在公共路径中指定的相对路径(参见API)中提供的。它不会被写入您配置的输出目录.

如果必须将webpack-dev-server写入输出目录，你可以使用write-file-webpack-plugin强制它这样做。

1.3. Maintainers

Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov

CopyWebpackPlugin