帮酷LOGO
0 0 评论
文章标签:Webpack  WEBP  DIR  cop  拷贝  文件  directories  WEB  
Copy files and directories in webpack

  • 源代码名称:copy-webpack-plugin
  • 源代码网址:http://www.github.com/webpack-contrib/copy-webpack-plugin
  • copy-webpack-plugin源代码文档
  • copy-webpack-plugin源代码下载
  • Git URL:
    git://www.github.com/webpack-contrib/copy-webpack-plugin.git
  • Git Clone代码到本地:
    git clone http://www.github.com/webpack-contrib/copy-webpack-plugin
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/webpack-contrib/copy-webpack-plugin
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • npmnodedepstestcoveragechat

    复制web pack插件

    将单个文件或整个目录复制到生成目录

    安装

    npm i -D copy-webpack-plugin

    用法

    webpack.config.js

    constCopyWebpackPlugin=require('copy-webpack-plugin')constconfig= {
     plugins: [
     newCopyWebpackPlugin([ ...patterns ], options)
     ]
    }

    如果在开发期间必须让webpack-dev-server写入目录,则可以使用write-file-webpack-plugin

    Patterns

    一个简单的pattern看起来像这样

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

    或者,你也可以使用{String}作为shorthand而不是{Object}

    'source'
    名称类型默认说明
    from{String|Object}undefined Globs接受minimatch选项
    fromArgs{Object}{ cwd: context } 除了下面的node-glob选项以外,请参阅,
    to{String|Object}undefined 如果from为文件或目录,则输出root,如果from为glob,则为解析的glob路径,
    toType{String} `` toType Options
    test{RegExp} `` 用于在to模板中提取元素的模式
    force{Boolean}false 覆盖已经在compilation.assets中的文件(通常由其他插件/加载器添加)
    ignore{Array}[] 忽略此模式的Globs
    flatten{Boolean}false 移除所有目录引用,并且仅复制文件名,如果文件有相同的名称,则结果是不确定,
    transform{Function|Promise}(content, path) => content 在复制前修改文件内容的功能或承诺
    cache{Boolean|Object}false 启用transform缓存,你可以使用 { cache: { key: 'my-cache-key' } } 使缓存无效
    context{String}options.context || compiler.options.context 确定如何解释from路径的路径

    from

    webpack.config.js

    [
     newCopyWebpackPlugin([
     '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

    [
     newCopyWebpackPlugin([
     { 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

    [
     newCopyWebpackPlugin([
     {
     from:'path/to/file.txt',
     to:'directory/with/extension.ext',
     toType:'dir' }
     ], options)
    ]
    'file'

    webpack.config.js

    [
     newCopyWebpackPlugin([
     {
     from:'path/to/file.txt',
     to:'file/without/extension',
     toType:'file' },
     ], options)
    ]
    'template'

    webpack.config.js

    [
     newCopyWebpackPlugin([
     {
     from:'src/' to:'dest/[name].[hash].[ext]',
     toType:'template' }
     ], options)
    ]

    test

    定义{RegExp}以匹配文件路径的某些部分,这些捕获组可以使用[N]占位符在名称属性中重用,注意[0]将被文件的整个路径替换,而[1]将包含{RegExp}的第一个捕获括号,等等。

    webpack.config.js

    [
     newCopyWebpackPlugin([
     {
     from:'*/*',
     to:'[1]-[2].[hash].[ext]',
     test:/([^/]+)/(.+).png$/ }
     ], options)
    ]

    force

    webpack.config.js

    [
     newCopyWebpackPlugin([
     { from:'src/**/*' to:'dest/', force:true }
     ], options)
    ]

    ignore

    webpack.config.js

    [
     newCopyWebpackPlugin([
     { from:'src/**/*' to:'dest/', ignore: [ '*.js' ] }
     ], options)
    ]

    flatten

    webpack.config.js

    [
     newCopyWebpackPlugin([
     { from:'src/**/*', to:'dest/', flatten:true }
     ], options)
    ]

    transform

    {Function}

    webpack.config.js

    [
     newCopyWebpackPlugin([
     {
     from:'src/*.png',
     to:'dest/',
     transform (content, path) {
     returnoptimize(content)
     }
     }
     ], options)
    ]
    {Promise}

    webpack.config.js

    [
     newCopyWebpackPlugin([
     {
     from:'src/*.png',
     to:'dest/',
     transform (content, path) {
     returnPromise.resolve(optimize(content))
     }
     }
     ], options)
    ]

    cache

    webpack.config.js

    [
     newCopyWebpackPlugin([
     {
     from:'src/*.png',
     to:'dest/',
     transform (content, path) {
     returnoptimize(content)
     },
     cache:true }
     ], options)
    ]

    context

    webpack.config.js

    [
     newCopyWebpackPlugin([
     { from:'src/*.txt', to:'dest/', context:'app/' }
     ], options)
    ]

    选项

    名称类型默认说明
    debug{String}'warning'debug Options
    ignore{Array}[] 要忽略的ud数组(应用于from )
    context{String}compiler.options.context 确定如何解释from路径的路径,该路径为所有模式共享,
    copyUnmodified{Boolean}false 复制文件,无论使用监视还是webpack-dev-server时修改,无论此选项如何,在第一次生成时复制所有文件,

    debug

    名称类型默认说明
    'info'{String|Boolean}false 文件位置和读取信息
    'debug'{String}false 非常详细的调试信息
    'warning'{String}true 仅警告
    'info'

    webpack.config.js

    [
     newCopyWebpackPlugin(
     [ ...patterns ],
     { debug:'info' }
     )
    ]
    'debug'

    webpack.config.js

    [
     newCopyWebpackPlugin(
     [ ...patterns ],
     { debug:'debug' }
     )
    ]
    'warning'(default)

    webpack.config.js

    [
     newCopyWebpackPlugin(
     [ ...patterns ],
     { debug:true }
     )
    ]

    ignore

    webpack.config.js

    [
     newCopyWebpackPlugin(
     [ ...patterns ],
     { ignore: [ '*.js', '*.css' ] }
     )
    ]

    context

    webpack.config.js

    [
     newCopyWebpackPlugin(
     [ ...patterns ],
     { context: [ '/app' ] }
     )
    ]

    copyUnmodified

    默认情况下,我们只在webpack --watchwebpack-dev-server生成期间复制修改过的文件,将此选项设置为true将复制所有文件。

    webpack.config.js

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

    维护人员


    Juho Vepslinen

    Joshua Wiens

    Michael Ciniawsky

    Alexander Krasnoyarov


    文章标签:WEB  文件  files  DIR  cop  WEBP  拷贝  Webpack  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语