CopyWebpackPlugin

安装

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

Usage

new CopyWebpackPlugin([patterns], options)

模式看起来像： { from: 'source', to: 'dest' }

或者，在只有一个from默认目标的简单情况下，可以使用字符串基元而不是对象：'source'

Name	需要	默认	细节
from	和		例子：'relative / file.txt''/ absolute / file.txt''relative / dir''/ absolute / dir''** / '{glob：'* / *'，dot：true} Globs接受minimatch选项
to	ñ	如果来自文件，则输出root;如果来自glob，则输出dirresolved glob路径	例子：'relative / file.txt''/ absolute / file.txt''relative / dir''/ absolute / dir''relative / name.ext''/ absolute / name.ext'Templates are file-loader patterns
toType	ñ	'file'如果具有扩展名或来自file'dir'如果来自目录，则不具有扩展名或以'/'模板结尾如果包含模板模式
context	ñ	options.context \|\| compiler.options.context	决定如何解释来自路径的路径
flatten	ñ	假	删除所有目录引用并仅拷贝文件名如果文件具有相同的名称，则结果是非确定性的
ignore	ñ	[]	对于这种模式，忽略其他的小球
transform	ñ	函数（内容，路径）{返回内容;}	在写入webpack之前修改文件内容的函数
force	ñ	假	覆盖已经在compilation.assets中的文件（通常由其他插件添加）

可用选项：

Name	默认	细节
context	compiler.options.context	确定如何解释来自路径的路径，为所有模式共享
ignore	[]	要忽略的球体阵列（应用于）
copyUnmodified	假	复制文件，无论使用watch或webpack-dev-server时如何修改。不管此选项如何，所有文件都将在第一个版本上复制。
debug	'警告'	选项：'警告' - 仅警告信息'或'真实' - 文件位置并读取信息'调试' - 非常详细的调试信息

例子

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

module.exports = {
    context: path.join(__dirname, 'app'),
    devServer: {
        // This is required for older versions of webpack-dev-server
        // if you use absolute 'to' paths. The path should be an
        // absolute path to your build destination.
        outputPath: path.join(__dirname, 'build')
    },
    plugins: [
        new CopyWebpackPlugin([
            // {output}/file.txt
            { from: 'from/file.txt' },

            // equivalent
            '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' },

            // Copy directory contents to {output}/
            { from: 'from/directory' },

            // Copy directory contents to {output}/to/directory/
            { from: 'from/directory', to: 'to/directory' },

            // Copy glob results to /absolute/path/
            { from: 'from/directory/**/*', to: '/absolute/path' },

            // Copy glob results (with dot files) to /absolute/path/
            {
                from: {
                    glob:'from/directory/**/*',
                    dot: true
                },
                to: '/absolute/path'
            },

            // Copy glob results, relative to 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: [
                // Doesn't copy any files with a txt extension    
                '*.txt',

                // Doesn't copy any file, even if they start with a dot
                '**/*',

                // Doesn't copy any file, except if they start with a dot
                { glob: '**/*', dot: false }
            ],

            // By default, we only copy modified files during
            // a watch or webpack-dev-server build. Setting this
            // to `true` copies all files.
            copyUnmodified: true
        })
    ]
};

常问问题

“EMFILE：打开的文件太多”或“ENFILE：文件表溢出”

用graceful-fs全局修补fs

npm install graceful-fs --save-dev

在你的webpack配置的顶部，插入这个

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

请参阅此问题以了解更多详情

这不会使用webpack-dev-server复制我的文件

从3.0.0版开始，我们停止使用fs将文件复制到文件系统，并根据webpack的内存中文件系统启动：

... webpack-dev-server将为您的构建文件夹中的静态文件提供服务。它会监视你的源文件的变化，当更改发生时，该包将被重新编译。此修改后的捆绑包在内存中以publicPath中指定的相对路径提供（请参阅API）。它不会写入您的已配置输出目录。

如果您必须将webpack-dev-server写入您的输出目录，则可以使用write-file-webpack-plugin强制执行。