c95b71800cec3a53d56be72b07a24895163b053699da05a64fb80b22a10057483afd1886ce96328523f4f339995e71414d6003a749298b9747485efcc6eaf0 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  1. <div align="center">
  2. <a href="https://github.com/webpack/webpack">
  3. <img width="200" height="200"
  4. src="https://webpack.js.org/assets/icon-square-big.svg">
  5. </a>
  6. </div>
  7. [![npm][npm]][npm-url]
  8. [![node][node]][node-url]
  9. [![deps][deps]][deps-url]
  10. [![tests][tests]][tests-url]
  11. [![cover][cover]][cover-url]
  12. [![chat][chat]][chat-url]
  13. [![size][size]][size-url]
  14. # copy-webpack-plugin
  15. Copies individual files or entire directories, which already exist, to the build directory.
  16. ## Getting Started
  17. To begin, you'll need to install `copy-webpack-plugin`:
  18. ```console
  19. $ npm install copy-webpack-plugin --save-dev
  20. ```
  21. Then add the plugin to your `webpack` config. For example:
  22. **webpack.config.js**
  23. ```js
  24. const CopyPlugin = require('copy-webpack-plugin');
  25. module.exports = {
  26. plugins: [
  27. new CopyPlugin([
  28. { from: 'source', to: 'dest' },
  29. { from: 'other', to: 'public' },
  30. ]),
  31. ],
  32. };
  33. ```
  34. > ℹ️ `webpack-copy-plugin` is not designed to copy files generated from the build process; rather, it is to copy files that already exist in the source tree, as part of the build process.
  35. > ℹ️ If you want `webpack-dev-server` to write files to the output directory during development, you can force it with the [`writeToDisk`](https://github.com/webpack/webpack-dev-middleware#writetodisk) option or the [`write-file-webpack-plugin`](https://github.com/gajus/write-file-webpack-plugin).
  36. ## Options
  37. The plugin's signature:
  38. **webpack.config.js**
  39. ```js
  40. module.exports = {
  41. plugins: [new CopyPlugin(patterns, options)],
  42. };
  43. ```
  44. ### Patterns
  45. | Name | Type | Default | Description |
  46. | :-------------------------------: | :-----------------: | :---------------------------------------------: | :---------------------------------------------------------------------------------------------------- |
  47. | [`from`](#from) | `{String\|Object}` | `undefined` | Glob or path from where we сopy files. |
  48. | [`to`](#to) | `{String}` | `compiler.options.output` | Output path. |
  49. | [`context`](#context) | `{String}` | `options.context \|\| compiler.options.context` | A path that determines how to interpret the `from` path. |
  50. | [`toType`](#totype) | `{String}` | `undefined` | Determinate what is `to` option - directory, file or template. |
  51. | [`test`](#test) | `{String\|RegExp}` | `undefined` | Pattern for extracting elements to be used in `to` templates. |
  52. | [`force`](#force) | `{Boolean}` | `false` | Overwrites files already in `compilation.assets` (usually added by other plugins/loaders). |
  53. | [`ignore`](#ignore) | `{Array}` | `[]` | Globs to ignore files. |
  54. | [`flatten`](#flatten) | `{Boolean}` | `false` | Removes all directory references and only copies file names. |
  55. | [`cache`](#cache) | `{Boolean\|Object}` | `false` | Enable `transform` caching. You can use `{ cache: { key: 'my-cache-key' } }` to invalidate the cache. |
  56. | [`transform`](#transform) | `{Function}` | `undefined` | Allows to modify the file contents. |
  57. | [`transformPath`](#transformpath) | `{Function}` | `undefined` | Allows to modify the writing path. |
  58. #### `from`
  59. Type: `String|Object`
  60. Default: `undefined`
  61. Glob or path from where we сopy files.
  62. Globs accept [minimatch options](https://github.com/isaacs/minimatch).
  63. You can define `from` as `Object` and use the [`node-glob` options](https://github.com/isaacs/node-glob#options).
  64. > ⚠️ Don't use directly `\\` in `from` (i.e `path\to\file.ext`) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator.
  65. > On Windows, the forward slash and the backward slash are both separators.
  66. > Instead please use `/` or `path` methods.
  67. **webpack.config.js**
  68. ```js
  69. module.exports = {
  70. plugins: [
  71. new CopyPlugin([
  72. 'relative/path/to/file.ext',
  73. '/absolute/path/to/file.ext',
  74. 'relative/path/to/dir',
  75. '/absolute/path/to/dir',
  76. '**/*',
  77. {
  78. from: '**/*',
  79. globOptions: {
  80. dot: false,
  81. },
  82. },
  83. ]),
  84. ],
  85. };
  86. ```
  87. #### `to`
  88. Type: `String`
  89. Default: `compiler.options.output`
  90. Output path.
  91. > ⚠️ Don't use directly `\\` in `to` (i.e `path\to\dest`) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator.
  92. > On Windows, the forward slash and the backward slash are both separators.
  93. > Instead please use `/` or `path` methods.
  94. **webpack.config.js**
  95. ```js
  96. module.exports = {
  97. plugins: [
  98. new CopyPlugin([
  99. {
  100. from: '**/*',
  101. to: 'relative/path/to/dest/',
  102. },
  103. {
  104. from: '**/*',
  105. to: '/absolute/path/to/dest/',
  106. },
  107. {
  108. from: '**/*',
  109. to: '[path][name].[contenthash].[ext]',
  110. },
  111. ]),
  112. ],
  113. };
  114. ```
  115. #### `context`
  116. Type: `String`
  117. Default: `options.context|compiler.options.context`
  118. A path that determines how to interpret the `from` path.
  119. > ⚠️ Don't use directly `\\` in `context` (i.e `path\to\context`) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator.
  120. > On Windows, the forward slash and the backward slash are both separators.
  121. > Instead please use `/` or `path` methods.
  122. **webpack.config.js**
  123. ```js
  124. module.exports = {
  125. plugins: [
  126. new CopyPlugin([
  127. {
  128. from: 'src/*.txt',
  129. to: 'dest/',
  130. context: 'app/',
  131. },
  132. ]),
  133. ],
  134. };
  135. ```
  136. #### `toType`
  137. Type: `String`
  138. Default: `undefined`
  139. Determinate what is `to` option - directory, file or template.
  140. Sometimes it is hard to say what is `to`, example `path/to/dir-with.ext`.
  141. If you want to copy files in directory you need use `dir` option.
  142. We try to automatically determine the `type` so you most likely do not need this option.
  143. | Name | Type | Default | Description |
  144. | :--------------: | :--------: | :---------: | :------------------------------------------------------------------------------------------------- |
  145. | **`'dir'`** | `{String}` | `undefined` | If `from` is directory, `to` has no extension or ends in `'/'` |
  146. | **`'file'`** | `{String}` | `undefined` | If `to` has extension or `from` is file |
  147. | **`'template'`** | `{String}` | `undefined` | If `to` contains [a template pattern](https://github.com/webpack-contrib/file-loader#placeholders) |
  148. ##### `'dir'`
  149. **webpack.config.js**
  150. ```js
  151. module.exports = {
  152. plugins: [
  153. new CopyPlugin([
  154. {
  155. from: 'path/to/file.txt',
  156. to: 'directory/with/extension.ext',
  157. toType: 'dir',
  158. },
  159. ]),
  160. ],
  161. };
  162. ```
  163. ##### `'file'`
  164. **webpack.config.js**
  165. ```js
  166. module.exports = {
  167. plugins: [
  168. new CopyPlugin([
  169. {
  170. from: 'path/to/file.txt',
  171. to: 'file/without/extension',
  172. toType: 'file',
  173. },
  174. ]),
  175. ],
  176. };
  177. ```
  178. ##### `'template'`
  179. **webpack.config.js**
  180. ```js
  181. module.exports = {
  182. plugins: [
  183. new CopyPlugin([
  184. {
  185. from: 'src/',
  186. to: 'dest/[name].[hash].[ext]',
  187. toType: 'template',
  188. },
  189. ]),
  190. ],
  191. };
  192. ```
  193. #### `test`
  194. Type: `string|RegExp`
  195. Default: `undefined`
  196. Pattern for extracting elements to be used in `to` templates.
  197. Defines a `{RegExp}` to match some parts of the file path.
  198. These capture groups can be reused in the name property using `[N]` placeholder.
  199. Note that `[0]` will be replaced by the entire path of the file,
  200. whereas `[1]` will contain the first capturing parenthesis of your `{RegExp}`
  201. and so on...
  202. **webpack.config.js**
  203. ```js
  204. module.exports = {
  205. plugins: [
  206. new CopyPlugin([
  207. {
  208. from: '*/*',
  209. to: '[1]-[2].[hash].[ext]',
  210. test: /([^/]+)\/(.+)\.png$/,
  211. },
  212. ]),
  213. ],
  214. };
  215. ```
  216. #### `force`
  217. Type: `Boolean`
  218. Default: `false`
  219. Overwrites files already in `compilation.assets` (usually added by other plugins/loaders).
  220. **webpack.config.js**
  221. ```js
  222. module.exports = {
  223. plugins: [
  224. new CopyPlugin([
  225. {
  226. from: 'src/**/*',
  227. to: 'dest/',
  228. force: true,
  229. },
  230. ]),
  231. ],
  232. };
  233. ```
  234. #### `ignore`
  235. Type: `Array`
  236. Default: `[]`
  237. Globs to ignore files.
  238. **webpack.config.js**
  239. ```js
  240. module.exports = {
  241. plugins: [
  242. new CopyPlugin([
  243. {
  244. from: 'src/**/*',
  245. to: 'dest/',
  246. ignore: ['*.js'],
  247. },
  248. ]),
  249. ],
  250. };
  251. ```
  252. > ⚠️ Note that only relative path should be provided to ignore option, an example to ignore `src/assets/subfolder/ignorfile.js` :
  253. **webpack.config.js**
  254. ```js
  255. module.exports = {
  256. plugins: [
  257. new CopyPlugin([
  258. {
  259. from: 'src/assets',
  260. to: 'dest/',
  261. ignore: ['subfolder/ingorefile.js'],
  262. },
  263. ]),
  264. ],
  265. };
  266. ```
  267. #### `flatten`
  268. Type: `Boolean`
  269. Default: `false`
  270. Removes all directory references and only copies file names.
  271. > ⚠️ If files have the same name, the result is non-deterministic.
  272. **webpack.config.js**
  273. ```js
  274. module.exports = {
  275. plugins: [
  276. new CopyPlugin([
  277. {
  278. from: 'src/**/*',
  279. to: 'dest/',
  280. flatten: true,
  281. },
  282. ]),
  283. ],
  284. };
  285. ```
  286. #### `cache`
  287. Type: `Boolean|Object`
  288. Default: `false`
  289. Enable/disable `transform` caching. You can use `{ cache: { key: 'my-cache-key' } }` to invalidate the cache.
  290. Default path to cache directory: `node_modules/.cache/copy-webpack-plugin`.
  291. **webpack.config.js**
  292. ```js
  293. module.exports = {
  294. plugins: [
  295. new CopyPlugin([
  296. {
  297. from: 'src/*.png',
  298. to: 'dest/',
  299. transform(content, path) {
  300. return optimize(content);
  301. },
  302. cache: true,
  303. },
  304. ]),
  305. ],
  306. };
  307. ```
  308. #### `transform`
  309. Type: `Function`
  310. Default: `undefined`
  311. Allows to modify the file contents.
  312. **webpack.config.js**
  313. ```js
  314. module.exports = {
  315. plugins: [
  316. new CopyPlugin([
  317. {
  318. from: 'src/*.png',
  319. to: 'dest/',
  320. transform(content, path) {
  321. return optimize(content);
  322. },
  323. },
  324. ]),
  325. ],
  326. };
  327. ```
  328. **webpack.config.js**
  329. ```js
  330. module.exports = {
  331. plugins: [
  332. new CopyPlugin([
  333. {
  334. from: 'src/*.png',
  335. to: 'dest/',
  336. transform(content, path) {
  337. return Promise.resolve(optimize(content));
  338. },
  339. },
  340. ]),
  341. ],
  342. };
  343. ```
  344. #### `transformPath`
  345. Type: `Function`
  346. Default: `undefined`
  347. Allows to modify the writing path.
  348. > ⚠️ Don't return directly `\\` in `transformPath` (i.e `path\to\newFile`) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator.
  349. > On Windows, the forward slash and the backward slash are both separators.
  350. > Instead please use `/` or `path` methods.
  351. **webpack.config.js**
  352. ```js
  353. module.exports = {
  354. plugins: [
  355. new CopyPlugin([
  356. {
  357. from: 'src/*.png',
  358. to: 'dest/',
  359. transformPath(targetPath, absolutePath) {
  360. return 'newPath';
  361. },
  362. },
  363. ]),
  364. ],
  365. };
  366. ```
  367. **webpack.config.js**
  368. ```js
  369. module.exports = {
  370. plugins: [
  371. new CopyPlugin([
  372. {
  373. from: 'src/*.png',
  374. to: 'dest/',
  375. transformPath(targetPath, absolutePath) {
  376. return Promise.resolve('newPath');
  377. },
  378. },
  379. ]),
  380. ],
  381. };
  382. ```
  383. ### Options
  384. | Name | Type | Default | Description |
  385. | :---------------------------------: | :---------: | :------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------ |
  386. | [`logLevel`](#loglevel) | `{String}` | **`'warn'`** | Level of messages that the module will log |
  387. | [`ignore`](#ignore) | `{Array}` | `[]` | Array of globs to ignore (applied to `from`) |
  388. | [`context`](#context) | `{String}` | `compiler.options.context` | A path that determines how to interpret the `from` path, shared for all patterns |
  389. | [`copyUnmodified`](#copyunmodified) | `{Boolean}` | `false` | Copies files, regardless of modification when using watch or `webpack-dev-server`. All files are copied on first build, regardless of this option |
  390. #### `logLevel`
  391. This property defines the level of messages that the module will log. Valid levels include:
  392. - `trace`
  393. - `debug`
  394. - `info`
  395. - `warn` (default)
  396. - `error`
  397. - `silent`
  398. Setting a log level means that all other levels below it will be visible in the
  399. console. Setting `logLevel: 'silent'` will hide all console output. The module
  400. leverages [`webpack-log`](https://github.com/webpack-contrib/webpack-log#readme)
  401. for logging management, and more information can be found on its page.
  402. **webpack.config.js**
  403. ```js
  404. module.exports = {
  405. plugins: [new CopyPlugin([...patterns], { logLevel: 'debug' })],
  406. };
  407. ```
  408. #### `ignore`
  409. Array of globs to ignore (applied to `from`).
  410. **webpack.config.js**
  411. ```js
  412. module.exports = {
  413. plugins: [new CopyPlugin([...patterns], { ignore: ['*.js', '*.css'] })],
  414. };
  415. ```
  416. #### `context`
  417. A path that determines how to interpret the `from` path, shared for all patterns.
  418. **webpack.config.js**
  419. ```js
  420. module.exports = {
  421. plugins: [new CopyPlugin([...patterns], { context: '/app' })],
  422. };
  423. ```
  424. #### `copyUnmodified`
  425. Copies files, regardless of modification when using watch or `webpack-dev-server`. All files are copied on first build, regardless of this option.
  426. > ℹ️ By default, we only copy **modified** files during a `webpack --watch` or `webpack-dev-server` build. Setting this option to `true` will copy all files.
  427. **webpack.config.js**
  428. ```js
  429. module.exports = {
  430. plugins: [new CopyPlugin([...patterns], { copyUnmodified: true })],
  431. };
  432. ```
  433. ## Contributing
  434. Please take a moment to read our contributing guidelines if you haven't yet done so.
  435. [CONTRIBUTING](./.github/CONTRIBUTING.md)
  436. ## License
  437. [MIT](./LICENSE)
  438. [npm]: https://img.shields.io/npm/v/copy-webpack-plugin.svg
  439. [npm-url]: https://npmjs.com/package/copy-webpack-plugin
  440. [node]: https://img.shields.io/node/v/copy-webpack-plugin.svg
  441. [node-url]: https://nodejs.org
  442. [deps]: https://david-dm.org/webpack-contrib/copy-webpack-plugin.svg
  443. [deps-url]: https://david-dm.org/webpack-contrib/copy-webpack-plugin
  444. [tests]: https://dev.azure.com/webpack-contrib/copy-webpack-plugin/_apis/build/status/webpack-contrib.copy-webpack-plugin?branchName=master
  445. [tests-url]: https://dev.azure.com/webpack-contrib/copy-webpack-plugin/_build/latest?definitionId=5&branchName=master
  446. [cover]: https://codecov.io/gh/webpack-contrib/copy-webpack-plugin/branch/master/graph/badge.svg
  447. [cover-url]: https://codecov.io/gh/webpack-contrib/copy-webpack-plugin
  448. [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
  449. [chat-url]: https://gitter.im/webpack/webpack
  450. [size]: https://packagephobia.now.sh/badge?p=copy-webpack-plugin
  451. [size-url]: https://packagephobia.now.sh/result?p=copy-webpack-plugin