技术

Webpack插件: Copy Webpack Plugin插件

微信扫一扫,分享到朋友圈

Webpack插件: Copy Webpack Plugin插件
0 0

    

Copy Webpack Plugin

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

安装

npm i -D copy-webpack-plugin

用法

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')

const config = {
  plugins: [
    new CopyWebpackPlugin([ ...patterns ], options)
  ]
}

ℹ️ 如果你希望webpack-dev-server在开发过程中将文件写入输出目录,你可以关注 write-file-webpack-plugin

模式

一个简单的模式是这样的

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

或者, in case of just a from with the default destination, you can also use a {String} as shorthand instead of an {Object}

或者,也可以简化不使用对象,只写一个字符串的作为 from 的默认值。

'source'
选项名 类型 默认值 描述
from {String\|Object} undefined Globs接受 minimatch选项
fromArgs {Object} { cwd: context } 除了下面的还可以参照 node-glob 选项
to {String\|Object} undefined 如果 from 是文件或者路径则返回路径,如果 from 是glob选项则解析glob路径
toType {String} toType 选项
test {RegExp} 用于提取要在to模板中使用的元素的模式
force {Boolean} false 覆盖已经在compilation.assets中的文件(通常由其他插件/加载器添加)
ignore {Array} [] 要忽略这种模式的Globs
flatten {Boolean} false 删除所有目录引用,仅复制文件名。 ⚠️ 如果文件具有相同的名称,则结果是不确定的
transform {Function\|Promise} (content, path) => content 复制之前使用 Function 或 Promise 修改文件。
transformPath {Function\|Promise} (targetPath, sourcePath) => path Function 或者 Promise 修改文件写入路径。
cache {Boolean\|Object} false 启用transform缓存。 您可以使用{cache:{key:'my-cache-key'}}来使缓存无效。
context {String} options.context \|\| compiler.options.context 确定如何解释from的路径

from

webpack.config.js

[
  new CopyWebpackPlugin([
    '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

[
  new CopyWebpackPlugin([
    { 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

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

'file'

webpack.config.js

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

'template'

webpack.config.js

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

test

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

webpack.config.js

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

force

webpack.config.js

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

ignore

webpack.config.js

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

flatten

webpack.config.js

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

transform

{Function}

webpack.config.js

[
  new CopyWebpackPlugin([
    {
      from: 'src/*.png',
      to: 'dest/',
      transform (content, path) {
        return optimize(content)
      }
    }
  ], options)
]

{Promise}

webpack.config.js

[
  new CopyWebpackPlugin([
    {
      from: 'src/*.png',
      to: 'dest/',
      transform (content, path) {
        return Promise.resolve(optimize(content))
      }
  }
  ], options)
]

transformPath

{Function}

webpack.config.js

[
  new CopyWebpackPlugin([
    {
      from: 'src/*.png',
      to: 'dest/',
      transformPath (targetPath, absolutePath) {
        return 'newPath';
      }
    }
  ], options)
]

{Promise}

webpack.config.js

[
  new CopyWebpackPlugin([
    {
      from: 'src/*.png',
      to: 'dest/',
      transformPath (targePath, absolutePath) {
        return Promise.resolve('newPath')
      }
  }
  ], options)
]

cache

webpack.config.js

[
  new CopyWebpackPlugin([
    {
      from: 'src/*.png',
      to: 'dest/',
      transform (content, path) {
        return optimize(content)
      },
      cache: true
    }
  ], options)
]

context

webpack.config.js

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

选项

选项 类型 默认值 描述
debug {String} 'warning' Debug 选项
ignore {Array} [] 要忽略的数组 (应用到 from)
context {String} compiler.options.context 确定如何解释from的路径, 所有模式都有效
copyUnmodified {Boolean} false 使用watch或webpack-dev-server时,无论修改如何,都会复制文件。 无论此选项如何,所有文件都在第一次构建时复制。

debug

名称 类型 默认值 描述
'info' {String\|Boolean} false 文件位置和读取信息
'debug' {String} false 非常详细的调试信息
'warning' {String} true 只是警告信息

'info'

webpack.config.js

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

'debug'

webpack.config.js

[
  new CopyWebpackPlugin(
    [ ...patterns ],
    { debug: 'debug' }
  )
]

'warning' (default)

webpack.config.js

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

ignore

webpack.config.js

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

context

webpack.config.js

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

copyUnmodified

ℹ️ 在使用webpack --watch 或者webpack-dev-server 构建的时候,默认只是复制修改的 文件。设置为 true的时候就复制所有的文件。

webpack.config.js

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

 

译文:内容来源于 https://github.com/webpack-contrib/copy-webpack-plugin

半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

vue3.0尝鲜 -- 摒弃Object.defineProperty,基于 Proxy 的观察者机制探索

上一篇

【填坑日记】ES6的新语法用ES5怎么写?find、findIndex源码来了

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      Webpack插件: Copy Webpack Plugin插件

      长按储存图像,分享给朋友

      微信扫一扫

      微信扫一扫