copy-webpack-plugin

[Christian-Yang]

https://github.com/kevlened/copy-webpack-plugin

Copy files and directories in webpack
复制文件和目录在webpack。

Copy Webpack Plugin 拷贝webpack 插件

This is a webpack plugin that copies individual files or entire directories to the build directory. 这是一个Webpack插件，可以将单个文件或整个目录复制到构建目录中。

Usage 用法

new CopyWebpackPlugin([patterns], options) new CopyWebpackPlugin（[patterns]，选项）

A pattern looks like: { from: 'source', to: 'dest' } 模式看起来像：{from：'source'，to：'dest'}

Pattern properties: 模式特性：

Available options: 可利用的选项

FAQ 常被问到的问题

(1)"EMFILE: too many open files" or "ENFILE: file table overflow" “EMFILE：打开文件太多”或“ENFILE：文件表溢出” 【可能就是说，当运行这个插件的时候，可能会出现的报错，这个报错信息的解决方法如下：】 Globally patch fs with graceful-fs 全局使用fs不定-----graceful-fs npm install graceful-fs --save-dev At the top of your webpack config, insert this： 在您的webpack config顶部插入

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

See this issue for more details 查看这个github上的issue就能找到这个问题的解释。

(2)This doesn't copy my files with webpack-dev-server 再使用webpack-dev-server的时候，并没有复制我的文件 Starting in version 3.0.0, we stopped using fs to copy files to the filesystem and started depending on webpack's in-memory filesystem: 从3.0.0版开始，我们停止使用fs将文件复制到文件系统，并根据webpack的内存文件系统启动： ... webpack-dev-server will serve the static files in your build folder. It’ll watch your source files for changes and when changes are made the bundle will be recompiled. webpack-dev-server将为您的构建文件夹中的静态文件提供服务。 它会监视您的源文件的更改，当更改完成后，软件包将被重新编译。 This modified bundle is served from memory at the relative path specified in publicPath (see API). 这个修改后的bundle从publicPath中指定的相对路径的内存（见API）提供。 It will not be written to your configured output directory. 它不会写入您配置的输出目录。 If you must have webpack-dev-server write to your output directory, you can force it with the write-file-webpack-plugin. 如果您必须将webpack-dev-server写入您的输出目录，则可以使用write-file-webpack-plugin强制它。

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

            // {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/
设置以dot开头的文件，都被拷贝
            {
                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'
                toType: 'file' 这个设置的意思就是把原来的文件拷贝到without目录下，并且新名字叫extension
            },

            // {output}/directory/with/extension.ext/file.txt
            {
                from: 'path/to/file.txt',
                to: 'directory/with/extension.ext',
                toType: 'dir'   
                toType: 'dir'   这个东西的意思是说，你拷贝的目标位置是一个dir的目录类型
            }
        ], {
            ignore: [
                // Doesn't copy any files with a txt extension    
                '*.txt',
                不拷贝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.
默认情况下，当我们进行一个watch或者是一个webpack-dev-server构建的时候，我们只拷贝改变的那些文件，
如果设置成为true那么就拷贝所有的文件，包括那些没有改变的文件。
            copyUnmodified: true
        })
    ]
};

这里的.htaccess文件，就应该是所谓的“dot”文件。如果设置为true，那么就拷贝以”.”开头的文件。