首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CopyWebpackPlugin

将单个文件或整个目录复制到构建目录。

安装

代码语言:javascript
复制
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

'警告'

选项:'警告' - 仅警告信息'或'真实' - 文件位置并读取信息'调试' - 非常详细的调试信息

例子

代码语言:javascript
复制
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配置的顶部,插入这个

代码语言:javascript
复制
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强制执行

扫码关注腾讯云开发者

领取腾讯云代金券