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 |
|
---|
8 | [![npm][npm]][npm-url]
|
---|
9 | [![node][node]][node-url]
|
---|
10 | [![deps][deps]][deps-url]
|
---|
11 | [![tests][tests]][tests-url]
|
---|
12 | [![cover][cover]][cover-url]
|
---|
13 | [![chat][chat]][chat-url]
|
---|
14 | [![size][size]][size-url]
|
---|
15 |
|
---|
16 | # copy-webpack-plugin
|
---|
17 |
|
---|
18 | Copies individual files or entire directories, which already exist, to the build directory.
|
---|
19 |
|
---|
20 | ## Getting Started
|
---|
21 |
|
---|
22 | To begin, you'll need to install `copy-webpack-plugin`:
|
---|
23 |
|
---|
24 | ```console
|
---|
25 | npm install copy-webpack-plugin --save-dev
|
---|
26 | ```
|
---|
27 |
|
---|
28 | Then add the plugin to your `webpack` config. For example:
|
---|
29 |
|
---|
30 | **webpack.config.js**
|
---|
31 |
|
---|
32 | ```js
|
---|
33 | const CopyPlugin = require("copy-webpack-plugin");
|
---|
34 |
|
---|
35 | module.exports = {
|
---|
36 | plugins: [
|
---|
37 | new CopyPlugin({
|
---|
38 | patterns: [
|
---|
39 | { from: "source", to: "dest" },
|
---|
40 | { from: "other", to: "public" },
|
---|
41 | ],
|
---|
42 | }),
|
---|
43 | ],
|
---|
44 | };
|
---|
45 | ```
|
---|
46 |
|
---|
47 | > ℹ️ `copy-webpack-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.
|
---|
48 |
|
---|
49 | > ℹ️ 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).
|
---|
50 |
|
---|
51 | > ℹ️ You can get the original source filename from [Asset Objects](https://webpack.js.org/api/stats/#asset-objects).
|
---|
52 |
|
---|
53 | ## Options
|
---|
54 |
|
---|
55 | The plugin's signature:
|
---|
56 |
|
---|
57 | **webpack.config.js**
|
---|
58 |
|
---|
59 | ```js
|
---|
60 | const CopyPlugin = require("copy-webpack-plugin");
|
---|
61 |
|
---|
62 | module.exports = {
|
---|
63 | plugins: [
|
---|
64 | new CopyPlugin({
|
---|
65 | patterns: [
|
---|
66 | { from: "source", to: "dest" },
|
---|
67 | { from: "other", to: "public" },
|
---|
68 | ],
|
---|
69 | options: {
|
---|
70 | concurrency: 100,
|
---|
71 | },
|
---|
72 | }),
|
---|
73 | ],
|
---|
74 | };
|
---|
75 | ```
|
---|
76 |
|
---|
77 | ### Patterns
|
---|
78 |
|
---|
79 | | Name | Type | Default | Description |
|
---|
80 | | :-------------------------------------: | :------------------: | :---------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
---|
81 | | [`from`](#from) | `{String}` | `undefined` | Glob or path from where we copy files. |
|
---|
82 | | [`to`](#to) | `{String\|Function}` | `compiler.options.output` | Output path. |
|
---|
83 | | [`context`](#context) | `{String}` | `options.context \|\| compiler.options.context` | A path that determines how to interpret the `from` path. |
|
---|
84 | | [`globOptions`](#globoptions) | `{Object}` | `undefined` | [Options][glob-options] passed to the glob pattern matching library including `ignore` option. |
|
---|
85 | | [`filter`](#filter) | `{Function}` | `undefined` | Allows to filter copied assets. |
|
---|
86 | | [`toType`](#totype) | `{String}` | `undefined` | Determinate what is `to` option - directory, file or template. |
|
---|
87 | | [`force`](#force) | `{Boolean}` | `false` | Overwrites files already in `compilation.assets` (usually added by other plugins/loaders). |
|
---|
88 | | [`priority`](#priority) | `{Number}` | `0` | Allows you to specify the copy priority. |
|
---|
89 | | [`transform`](#transform) | `{Object}` | `undefined` | Allows to modify the file contents. Enable `transform` caching. You can use `{ transform: {cache: { key: 'my-cache-key' }} }` to invalidate the cache. |
|
---|
90 | | [`transformAll`](#transformAll) | `{Function}` | `undefined` | Allows you to modify the contents of multiple files and save the result to one file. |
|
---|
91 | | [`noErrorOnMissing`](#noerroronmissing) | `{Boolean}` | `false` | Doesn't generate an error on missing file(s). |
|
---|
92 | | [`info`](#info) | `{Object\|Function}` | `undefined` | Allows to add assets info. |
|
---|
93 |
|
---|
94 | #### `from`
|
---|
95 |
|
---|
96 | Type: `String`
|
---|
97 | Default: `undefined`
|
---|
98 |
|
---|
99 | Glob or path from where we copy files.
|
---|
100 | Globs accept [fast-glob pattern-syntax](https://github.com/mrmlnc/fast-glob#pattern-syntax).
|
---|
101 | Glob can only be a `string`.
|
---|
102 |
|
---|
103 | > ⚠️ Don't use directly `\\` in `from` option if it is a `glob` (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.
|
---|
104 | > On Windows, the forward slash and the backward slash are both separators.
|
---|
105 | > Instead please use `/`.
|
---|
106 |
|
---|
107 | **webpack.config.js**
|
---|
108 |
|
---|
109 | ```js
|
---|
110 | module.exports = {
|
---|
111 | plugins: [
|
---|
112 | new CopyPlugin({
|
---|
113 | patterns: [
|
---|
114 | "relative/path/to/file.ext",
|
---|
115 | "relative/path/to/dir",
|
---|
116 | path.resolve(__dirname, "src", "file.ext"),
|
---|
117 | path.resolve(__dirname, "src", "dir"),
|
---|
118 | "**/*",
|
---|
119 | {
|
---|
120 | from: "**/*",
|
---|
121 | },
|
---|
122 | // If absolute path is a `glob` we replace backslashes with forward slashes, because only forward slashes can be used in the `glob`
|
---|
123 | path.posix.join(
|
---|
124 | path.resolve(__dirname, "src").replace(/\\/g, "/"),
|
---|
125 | "*.txt"
|
---|
126 | ),
|
---|
127 | ],
|
---|
128 | }),
|
---|
129 | ],
|
---|
130 | };
|
---|
131 | ```
|
---|
132 |
|
---|
133 | ##### `For windows`
|
---|
134 |
|
---|
135 | If you define `from` as absolute file path or absolute folder path on `Windows`, you can use windows path segment (`\\`)
|
---|
136 |
|
---|
137 | ```js
|
---|
138 | module.exports = {
|
---|
139 | plugins: [
|
---|
140 | new CopyPlugin({
|
---|
141 | patterns: [
|
---|
142 | {
|
---|
143 | from: path.resolve(__dirname, "file.txt"),
|
---|
144 | },
|
---|
145 | ],
|
---|
146 | }),
|
---|
147 | ],
|
---|
148 | };
|
---|
149 | ```
|
---|
150 |
|
---|
151 | But you should always use forward-slashes in `glob` expressions
|
---|
152 | See [fast-glob manual](https://github.com/mrmlnc/fast-glob#how-to-write-patterns-on-windows).
|
---|
153 |
|
---|
154 | ```js
|
---|
155 | module.exports = {
|
---|
156 | plugins: [
|
---|
157 | new CopyPlugin({
|
---|
158 | patterns: [
|
---|
159 | {
|
---|
160 | // If absolute path is a `glob` we replace backslashes with forward slashes, because only forward slashes can be used in the `glob`
|
---|
161 | from: path.posix.join(
|
---|
162 | path.resolve(__dirname, "fixtures").replace(/\\/g, "/"),
|
---|
163 | "*.txt"
|
---|
164 | ),
|
---|
165 | },
|
---|
166 | ],
|
---|
167 | }),
|
---|
168 | ],
|
---|
169 | };
|
---|
170 | ```
|
---|
171 |
|
---|
172 | The `context` behaves differently depending on what the `from` is (`glob`, `file` or `dir`).
|
---|
173 | More [`examples`](#examples)
|
---|
174 |
|
---|
175 | #### `to`
|
---|
176 |
|
---|
177 | Type: `String|Function`
|
---|
178 | Default: `compiler.options.output`
|
---|
179 |
|
---|
180 | ##### String
|
---|
181 |
|
---|
182 | Output path.
|
---|
183 |
|
---|
184 | > ⚠️ 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.
|
---|
185 | > On Windows, the forward slash and the backward slash are both separators.
|
---|
186 | > Instead please use `/` or `path` methods.
|
---|
187 |
|
---|
188 | **webpack.config.js**
|
---|
189 |
|
---|
190 | ```js
|
---|
191 | module.exports = {
|
---|
192 | plugins: [
|
---|
193 | new CopyPlugin({
|
---|
194 | patterns: [
|
---|
195 | {
|
---|
196 | from: "**/*",
|
---|
197 | to: "relative/path/to/dest/",
|
---|
198 | },
|
---|
199 | {
|
---|
200 | from: "**/*",
|
---|
201 | to: "/absolute/path/to/dest/",
|
---|
202 | },
|
---|
203 | {
|
---|
204 | from: "**/*",
|
---|
205 | to: "[path][name].[contenthash][ext]",
|
---|
206 | },
|
---|
207 | ],
|
---|
208 | }),
|
---|
209 | ],
|
---|
210 | };
|
---|
211 | ```
|
---|
212 |
|
---|
213 | ##### Function
|
---|
214 |
|
---|
215 | Allows to modify the writing path.
|
---|
216 |
|
---|
217 | > ⚠️ Don't return directly `\\` in `to` (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.
|
---|
218 | > On Windows, the forward slash and the backward slash are both separators.
|
---|
219 | > Instead please use `/` or `path` methods.
|
---|
220 |
|
---|
221 | **webpack.config.js**
|
---|
222 |
|
---|
223 | ```js
|
---|
224 | module.exports = {
|
---|
225 | plugins: [
|
---|
226 | new CopyPlugin({
|
---|
227 | patterns: [
|
---|
228 | {
|
---|
229 | from: "src/*.png",
|
---|
230 | to({ context, absoluteFilename }) {
|
---|
231 | return "dest/newPath/[name][ext]";
|
---|
232 | },
|
---|
233 | },
|
---|
234 | ],
|
---|
235 | }),
|
---|
236 | ],
|
---|
237 | };
|
---|
238 | ```
|
---|
239 |
|
---|
240 | **webpack.config.js**
|
---|
241 |
|
---|
242 | ```js
|
---|
243 | module.exports = {
|
---|
244 | plugins: [
|
---|
245 | new CopyPlugin({
|
---|
246 | patterns: [
|
---|
247 | {
|
---|
248 | from: "src/*.png",
|
---|
249 | to({ context, absoluteFilename }) {
|
---|
250 | return Promise.resolve("dest/newPath/[name][ext]");
|
---|
251 | },
|
---|
252 | },
|
---|
253 | ],
|
---|
254 | }),
|
---|
255 | ],
|
---|
256 | };
|
---|
257 | ```
|
---|
258 |
|
---|
259 | #### `context`
|
---|
260 |
|
---|
261 | Type: `String`
|
---|
262 | Default: `options.context|compiler.options.context`
|
---|
263 |
|
---|
264 | A path that determines how to interpret the `from` path.
|
---|
265 |
|
---|
266 | > ⚠️ 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.
|
---|
267 | > On Windows, the forward slash and the backward slash are both separators.
|
---|
268 | > Instead please use `/` or `path` methods.
|
---|
269 |
|
---|
270 | **webpack.config.js**
|
---|
271 |
|
---|
272 | ```js
|
---|
273 | module.exports = {
|
---|
274 | plugins: [
|
---|
275 | new CopyPlugin({
|
---|
276 | patterns: [
|
---|
277 | {
|
---|
278 | from: "src/*.txt",
|
---|
279 | to: "dest/",
|
---|
280 | context: "app/",
|
---|
281 | },
|
---|
282 | ],
|
---|
283 | }),
|
---|
284 | ],
|
---|
285 | };
|
---|
286 | ```
|
---|
287 |
|
---|
288 | The `context` option can be an absolute or relative path. If `context` is a relative, then it is converted to absolute based to `compiler.options.context`
|
---|
289 |
|
---|
290 | Also, `context` indicates how to interpret the search results. Further, he is considered in this role.
|
---|
291 |
|
---|
292 | To determine the structure from which the found resources will be copied to the destination folder, the `context` option is used.
|
---|
293 |
|
---|
294 | If `from` is a file, then `context` is equal to the directory in which this file is located. Accordingly, the result will be only the file name.
|
---|
295 |
|
---|
296 | If `from` is a directory, then `context` is the same as `from` and is equal to the directory itself. In this case, the result will be a hierarchical structure of the found folders and files relative to the specified directory.
|
---|
297 |
|
---|
298 | If `from` is a glob, then regardless of the `context` option, the result will be the structure specified in the `from` option
|
---|
299 |
|
---|
300 | More [`examples`](#examples)
|
---|
301 |
|
---|
302 | #### `globOptions`
|
---|
303 |
|
---|
304 | Type: `Object`
|
---|
305 | Default: `undefined`
|
---|
306 |
|
---|
307 | Allows to configute the glob pattern matching library used by the plugin. [See the list of supported options][glob-options]
|
---|
308 | To exclude files from the selection, you should use [globOptions.ignore option](https://github.com/mrmlnc/fast-glob#ignore)
|
---|
309 |
|
---|
310 | **webpack.config.js**
|
---|
311 |
|
---|
312 | ```js
|
---|
313 | module.exports = {
|
---|
314 | plugins: [
|
---|
315 | new CopyPlugin({
|
---|
316 | patterns: [
|
---|
317 | {
|
---|
318 | from: "public/**/*",
|
---|
319 | globOptions: {
|
---|
320 | dot: true,
|
---|
321 | gitignore: true,
|
---|
322 | ignore: ["**/file.*", "**/ignored-directory/**"],
|
---|
323 | },
|
---|
324 | },
|
---|
325 | ],
|
---|
326 | }),
|
---|
327 | ],
|
---|
328 | };
|
---|
329 | ```
|
---|
330 |
|
---|
331 | #### `filter`
|
---|
332 |
|
---|
333 | Type: `Function`
|
---|
334 | Default: `undefined`
|
---|
335 |
|
---|
336 | > ℹ️ To ignore files by path please use the [`globOptions.ignore`](#globoptions) option.
|
---|
337 |
|
---|
338 | **webpack.config.js**
|
---|
339 |
|
---|
340 | ```js
|
---|
341 | const fs = require("fs").promise;
|
---|
342 |
|
---|
343 | module.exports = {
|
---|
344 | plugins: [
|
---|
345 | new CopyPlugin({
|
---|
346 | patterns: [
|
---|
347 | {
|
---|
348 | from: "public/**/*",
|
---|
349 | filter: async (resourcePath) => {
|
---|
350 | const data = await fs.promises.readFile(resourcePath);
|
---|
351 | const content = data.toString();
|
---|
352 |
|
---|
353 | if (content === "my-custom-content") {
|
---|
354 | return false;
|
---|
355 | }
|
---|
356 |
|
---|
357 | return true;
|
---|
358 | },
|
---|
359 | },
|
---|
360 | ],
|
---|
361 | }),
|
---|
362 | ],
|
---|
363 | };
|
---|
364 | ```
|
---|
365 |
|
---|
366 | #### `toType`
|
---|
367 |
|
---|
368 | Type: `String`
|
---|
369 | Default: `undefined`
|
---|
370 |
|
---|
371 | Determinate what is `to` option - directory, file or template.
|
---|
372 | Sometimes it is hard to say what is `to`, example `path/to/dir-with.ext`.
|
---|
373 | If you want to copy files in directory you need use `dir` option.
|
---|
374 | We try to automatically determine the `type` so you most likely do not need this option.
|
---|
375 |
|
---|
376 | | Name | Type | Default | Description |
|
---|
377 | | :--------------: | :--------: | :---------: | :--------------------------------------------------------------------------------------------------- |
|
---|
378 | | **`'dir'`** | `{String}` | `undefined` | If `to` has no extension or ends on `'/'` |
|
---|
379 | | **`'file'`** | `{String}` | `undefined` | If `to` is not a directory and is not a template |
|
---|
380 | | **`'template'`** | `{String}` | `undefined` | If `to` contains [a template pattern](https://webpack.js.org/configuration/output/#template-strings) |
|
---|
381 |
|
---|
382 | ##### `'dir'`
|
---|
383 |
|
---|
384 | **webpack.config.js**
|
---|
385 |
|
---|
386 | ```js
|
---|
387 | module.exports = {
|
---|
388 | plugins: [
|
---|
389 | new CopyPlugin({
|
---|
390 | patterns: [
|
---|
391 | {
|
---|
392 | from: "path/to/file.txt",
|
---|
393 | to: "directory/with/extension.ext",
|
---|
394 | toType: "dir",
|
---|
395 | },
|
---|
396 | ],
|
---|
397 | }),
|
---|
398 | ],
|
---|
399 | };
|
---|
400 | ```
|
---|
401 |
|
---|
402 | ##### `'file'`
|
---|
403 |
|
---|
404 | **webpack.config.js**
|
---|
405 |
|
---|
406 | ```js
|
---|
407 | module.exports = {
|
---|
408 | plugins: [
|
---|
409 | new CopyPlugin({
|
---|
410 | patterns: [
|
---|
411 | {
|
---|
412 | from: "path/to/file.txt",
|
---|
413 | to: "file/without/extension",
|
---|
414 | toType: "file",
|
---|
415 | },
|
---|
416 | ],
|
---|
417 | }),
|
---|
418 | ],
|
---|
419 | };
|
---|
420 | ```
|
---|
421 |
|
---|
422 | ##### `'template'`
|
---|
423 |
|
---|
424 | **webpack.config.js**
|
---|
425 |
|
---|
426 | ```js
|
---|
427 | module.exports = {
|
---|
428 | plugins: [
|
---|
429 | new CopyPlugin({
|
---|
430 | patterns: [
|
---|
431 | {
|
---|
432 | from: "src/",
|
---|
433 | to: "dest/[name].[contenthash][ext]",
|
---|
434 | toType: "template",
|
---|
435 | },
|
---|
436 | ],
|
---|
437 | }),
|
---|
438 | ],
|
---|
439 | };
|
---|
440 | ```
|
---|
441 |
|
---|
442 | #### `force`
|
---|
443 |
|
---|
444 | Type: `Boolean`
|
---|
445 | Default: `false`
|
---|
446 |
|
---|
447 | Overwrites files already in `compilation.assets` (usually added by other plugins/loaders).
|
---|
448 |
|
---|
449 | **webpack.config.js**
|
---|
450 |
|
---|
451 | ```js
|
---|
452 | module.exports = {
|
---|
453 | plugins: [
|
---|
454 | new CopyPlugin({
|
---|
455 | patterns: [
|
---|
456 | {
|
---|
457 | from: "src/**/*",
|
---|
458 | to: "dest/",
|
---|
459 | force: true,
|
---|
460 | },
|
---|
461 | ],
|
---|
462 | }),
|
---|
463 | ],
|
---|
464 | };
|
---|
465 | ```
|
---|
466 |
|
---|
467 | #### `priority`
|
---|
468 |
|
---|
469 | Type: `Number`
|
---|
470 | Default: `0`
|
---|
471 |
|
---|
472 | Allows to specify the priority of copying files with the same destination name.
|
---|
473 | Files for patterns with higher priority will be copied later.
|
---|
474 | To overwrite files, the [`force`](#force) option must be enabled.
|
---|
475 |
|
---|
476 | **webpack.config.js**
|
---|
477 |
|
---|
478 | ```js
|
---|
479 | module.exports = {
|
---|
480 | plugins: [
|
---|
481 | new CopyPlugin({
|
---|
482 | patterns: [
|
---|
483 | // Copied second and will overwrite "dir_2/file.txt"
|
---|
484 | {
|
---|
485 | from: "dir_1/file.txt",
|
---|
486 | to: "newfile.txt",
|
---|
487 | force: true,
|
---|
488 | priority: 10,
|
---|
489 | },
|
---|
490 | // Copied first
|
---|
491 | {
|
---|
492 | from: "dir_2/file.txt",
|
---|
493 | to: "newfile.txt",
|
---|
494 | priority: 5,
|
---|
495 | },
|
---|
496 | ],
|
---|
497 | }),
|
---|
498 | ],
|
---|
499 | };
|
---|
500 | ```
|
---|
501 |
|
---|
502 | #### `transform`
|
---|
503 |
|
---|
504 | Type: `Function|Object`
|
---|
505 | Default: `undefined`
|
---|
506 |
|
---|
507 | Allows to modify the file contents.
|
---|
508 |
|
---|
509 | ##### `Function`
|
---|
510 |
|
---|
511 | **webpack.config.js**
|
---|
512 |
|
---|
513 | ```js
|
---|
514 | module.exports = {
|
---|
515 | plugins: [
|
---|
516 | new CopyPlugin({
|
---|
517 | patterns: [
|
---|
518 | {
|
---|
519 | from: "src/*.png",
|
---|
520 | to: "dest/",
|
---|
521 | // The `content` argument is a [`Buffer`](https://nodejs.org/api/buffer.html) object, it could be converted to a `String` to be processed using `content.toString()`
|
---|
522 | // The `absoluteFrom` argument is a `String`, it is absolute path from where the file is being copied
|
---|
523 | transform(content, absoluteFrom) {
|
---|
524 | return optimize(content);
|
---|
525 | },
|
---|
526 | },
|
---|
527 | ],
|
---|
528 | }),
|
---|
529 | ],
|
---|
530 | };
|
---|
531 | ```
|
---|
532 |
|
---|
533 | ##### `Object`
|
---|
534 |
|
---|
535 | | Name | Type | Default | Description |
|
---|
536 | | :-------------------------------: | :-----------------: | :---------: | :--------------------------------------------------------------------------------------------------------------- |
|
---|
537 | | **[`transformer`](#transformer)** | `{Function}` | `undefined` | Allows to modify the file contents. |
|
---|
538 | | **[`cache`](#cache)** | `{Boolean\|Object}` | `false` | Enable `transform` caching. You can use `transform: { cache: { key: 'my-cache-key' } }` to invalidate the cache. |
|
---|
539 |
|
---|
540 | ###### `transformer`
|
---|
541 |
|
---|
542 | Type: `Function`
|
---|
543 | Default: `undefined`
|
---|
544 |
|
---|
545 | **webpack.config.js**
|
---|
546 |
|
---|
547 | ```js
|
---|
548 | module.exports = {
|
---|
549 | plugins: [
|
---|
550 | new CopyPlugin({
|
---|
551 | patterns: [
|
---|
552 | {
|
---|
553 | from: "src/*.png",
|
---|
554 | to: "dest/",
|
---|
555 | // The `content` argument is a [`Buffer`](https://nodejs.org/api/buffer.html) object, it could be converted to a `String` to be processed using `content.toString()`
|
---|
556 | // The `absoluteFrom` argument is a `String`, it is absolute path from where the file is being copied
|
---|
557 | transform: {
|
---|
558 | transformer(content, absoluteFrom) {
|
---|
559 | return optimize(content);
|
---|
560 | },
|
---|
561 | },
|
---|
562 | },
|
---|
563 | ],
|
---|
564 | }),
|
---|
565 | ],
|
---|
566 | };
|
---|
567 | ```
|
---|
568 |
|
---|
569 | **webpack.config.js**
|
---|
570 |
|
---|
571 | ```js
|
---|
572 | module.exports = {
|
---|
573 | plugins: [
|
---|
574 | new CopyPlugin({
|
---|
575 | patterns: [
|
---|
576 | {
|
---|
577 | from: "src/*.png",
|
---|
578 | to: "dest/",
|
---|
579 | transform: {
|
---|
580 | transformer(content, path) {
|
---|
581 | return Promise.resolve(optimize(content));
|
---|
582 | },
|
---|
583 | },
|
---|
584 | },
|
---|
585 | ],
|
---|
586 | }),
|
---|
587 | ],
|
---|
588 | };
|
---|
589 | ```
|
---|
590 |
|
---|
591 | ###### `cache`
|
---|
592 |
|
---|
593 | Type: `Boolean|Object`
|
---|
594 | Default: `false`
|
---|
595 |
|
---|
596 | **webpack.config.js**
|
---|
597 |
|
---|
598 | Enable/disable and configure caching.
|
---|
599 | Default path to cache directory: `node_modules/.cache/copy-webpack-plugin`.
|
---|
600 |
|
---|
601 | ###### `Boolean`
|
---|
602 |
|
---|
603 | Enables/Disable `transform` caching.
|
---|
604 |
|
---|
605 | **webpack.config.js**
|
---|
606 |
|
---|
607 | ```js
|
---|
608 | module.exports = {
|
---|
609 | plugins: [
|
---|
610 | new CopyPlugin({
|
---|
611 | patterns: [
|
---|
612 | {
|
---|
613 | from: "src/*.png",
|
---|
614 | to: "dest/",
|
---|
615 | transform: {
|
---|
616 | transformer(content, path) {
|
---|
617 | return optimize(content);
|
---|
618 | },
|
---|
619 | cache: true,
|
---|
620 | },
|
---|
621 | },
|
---|
622 | ],
|
---|
623 | }),
|
---|
624 | ],
|
---|
625 | };
|
---|
626 | ```
|
---|
627 |
|
---|
628 | ##### `Object`
|
---|
629 |
|
---|
630 | Enables `transform` caching and setup cache directory and invalidation keys.
|
---|
631 |
|
---|
632 | **webpack.config.js**
|
---|
633 |
|
---|
634 | ```js
|
---|
635 | module.exports = {
|
---|
636 | plugins: [
|
---|
637 | new CopyPlugin({
|
---|
638 | patterns: [
|
---|
639 | {
|
---|
640 | from: "src/*.png",
|
---|
641 | to: "dest/",
|
---|
642 | transform: {
|
---|
643 | transformer(content, path) {
|
---|
644 | return optimize(content);
|
---|
645 | },
|
---|
646 | cache: {
|
---|
647 | directory: path.resolve(__dirname, "cache-directory"),
|
---|
648 | keys: {
|
---|
649 | // May be useful for invalidating cache based on external values
|
---|
650 | // For example, you can invalid cache based on `process.version` - { node: process.version }
|
---|
651 | key: "value",
|
---|
652 | },
|
---|
653 | },
|
---|
654 | },
|
---|
655 | },
|
---|
656 | ],
|
---|
657 | }),
|
---|
658 | ],
|
---|
659 | };
|
---|
660 | ```
|
---|
661 |
|
---|
662 | You can setup invalidation keys using a function.
|
---|
663 |
|
---|
664 | Simple function:
|
---|
665 |
|
---|
666 | **webpack.config.js**
|
---|
667 |
|
---|
668 | ```js
|
---|
669 | module.exports = {
|
---|
670 | plugins: [
|
---|
671 | new CopyPlugin({
|
---|
672 | patterns: [
|
---|
673 | {
|
---|
674 | from: "src/*.png",
|
---|
675 | to: "dest/",
|
---|
676 | transform: {
|
---|
677 | transformer(content, path) {
|
---|
678 | return optimize(content);
|
---|
679 | },
|
---|
680 | cache: {
|
---|
681 | directory: path.resolve(__dirname, "cache-directory"),
|
---|
682 | keys: (defaultCacheKeys, absoluteFrom) => {
|
---|
683 | const keys = getCustomCacheInvalidationKeysSync();
|
---|
684 |
|
---|
685 | return {
|
---|
686 | ...defaultCacheKeys,
|
---|
687 | keys,
|
---|
688 | };
|
---|
689 | },
|
---|
690 | },
|
---|
691 | },
|
---|
692 | },
|
---|
693 | ],
|
---|
694 | }),
|
---|
695 | ],
|
---|
696 | };
|
---|
697 | ```
|
---|
698 |
|
---|
699 | Async function:
|
---|
700 |
|
---|
701 | **webpack.config.js**
|
---|
702 |
|
---|
703 | ```js
|
---|
704 | module.exports = {
|
---|
705 | plugins: [
|
---|
706 | new CopyPlugin({
|
---|
707 | patterns: [
|
---|
708 | {
|
---|
709 | from: "src/*.png",
|
---|
710 | to: "dest/",
|
---|
711 | transform: {
|
---|
712 | transformer(content, path) {
|
---|
713 | return optimize(content);
|
---|
714 | },
|
---|
715 | cache: {
|
---|
716 | directory: path.resolve(__dirname, "cache-directory"),
|
---|
717 | keys: async (defaultCacheKeys, absoluteFrom) => {
|
---|
718 | const keys = await getCustomCacheInvalidationKeysAsync();
|
---|
719 |
|
---|
720 | return {
|
---|
721 | ...defaultCacheKeys,
|
---|
722 | keys,
|
---|
723 | };
|
---|
724 | },
|
---|
725 | },
|
---|
726 | },
|
---|
727 | },
|
---|
728 | ],
|
---|
729 | }),
|
---|
730 | ],
|
---|
731 | };
|
---|
732 | ```
|
---|
733 |
|
---|
734 | #### `transformAll`
|
---|
735 |
|
---|
736 | Type: `Function`
|
---|
737 | Default: `undefined`
|
---|
738 |
|
---|
739 | Allows you to modify the contents of multiple files and save the result to one file.
|
---|
740 |
|
---|
741 | > ℹ️ The `to` option must be specified and point to a file. It is allowed to use only `[contenthash]` and `[fullhash]` template strings.
|
---|
742 |
|
---|
743 | **webpack.config.js**
|
---|
744 |
|
---|
745 | ```js
|
---|
746 | module.exports = {
|
---|
747 | plugins: [
|
---|
748 | new CopyPlugin({
|
---|
749 | patterns: [
|
---|
750 | {
|
---|
751 | from: "src/**/*.txt",
|
---|
752 | to: "dest/file.txt",
|
---|
753 | // The `assets` argument is an assets array for the pattern.from ("src/**/*.txt")
|
---|
754 | transformAll(assets) {
|
---|
755 | const result = assets.reduce((accumulator, asset) => {
|
---|
756 | // The asset content can be obtained from `asset.source` using `source` method.
|
---|
757 | // The asset content is a [`Buffer`](https://nodejs.org/api/buffer.html) object, it could be converted to a `String` to be processed using `content.toString()`
|
---|
758 | const content = asset.data;
|
---|
759 |
|
---|
760 | accumulator = `${accumulator}${content}\n`;
|
---|
761 | return accumulator;
|
---|
762 | }, "");
|
---|
763 |
|
---|
764 | return result;
|
---|
765 | },
|
---|
766 | },
|
---|
767 | ],
|
---|
768 | }),
|
---|
769 | ],
|
---|
770 | };
|
---|
771 | ```
|
---|
772 |
|
---|
773 | ### `noErrorOnMissing`
|
---|
774 |
|
---|
775 | Type: `Boolean`
|
---|
776 | Default: `false`
|
---|
777 |
|
---|
778 | Doesn't generate an error on missing file(s);
|
---|
779 |
|
---|
780 | ```js
|
---|
781 | module.exports = {
|
---|
782 | plugins: [
|
---|
783 | new CopyPlugin({
|
---|
784 | patterns: [
|
---|
785 | {
|
---|
786 | from: path.resolve(__dirname, "missing-file.txt"),
|
---|
787 | noErrorOnMissing: true,
|
---|
788 | },
|
---|
789 | ],
|
---|
790 | }),
|
---|
791 | ],
|
---|
792 | };
|
---|
793 | ```
|
---|
794 |
|
---|
795 | #### `info`
|
---|
796 |
|
---|
797 | Type: `Object|Function<Object>`
|
---|
798 | Default: `undefined`
|
---|
799 |
|
---|
800 | Allows to add assets info.
|
---|
801 |
|
---|
802 | **webpack.config.js**
|
---|
803 |
|
---|
804 | ```js
|
---|
805 | module.exports = {
|
---|
806 | plugins: [
|
---|
807 | new CopyPlugin({
|
---|
808 | patterns: [
|
---|
809 | "relative/path/to/file.ext",
|
---|
810 | {
|
---|
811 | from: "**/*",
|
---|
812 | // Terser skip this file for minimization
|
---|
813 | info: { minimized: true },
|
---|
814 | },
|
---|
815 | ],
|
---|
816 | }),
|
---|
817 | ],
|
---|
818 | };
|
---|
819 | ```
|
---|
820 |
|
---|
821 | **webpack.config.js**
|
---|
822 |
|
---|
823 | ```js
|
---|
824 | module.exports = {
|
---|
825 | plugins: [
|
---|
826 | new CopyPlugin({
|
---|
827 | patterns: [
|
---|
828 | "relative/path/to/file.ext",
|
---|
829 | {
|
---|
830 | from: "**/*",
|
---|
831 | // Terser skip this file for minimization
|
---|
832 | info: (file) => ({ minimized: true }),
|
---|
833 | },
|
---|
834 | ],
|
---|
835 | }),
|
---|
836 | ],
|
---|
837 | };
|
---|
838 | ```
|
---|
839 |
|
---|
840 | ### Options
|
---|
841 |
|
---|
842 | | Name | Type | Default | Description |
|
---|
843 | | :---------------------------: | :--------: | :-----: | :----------------------------------------------- |
|
---|
844 | | [`concurrency`](#concurrency) | `{Number}` | `100` | Limits the number of simultaneous requests to fs |
|
---|
845 |
|
---|
846 | #### `concurrency`
|
---|
847 |
|
---|
848 | limits the number of simultaneous requests to fs
|
---|
849 |
|
---|
850 | **webpack.config.js**
|
---|
851 |
|
---|
852 | ```js
|
---|
853 | module.exports = {
|
---|
854 | plugins: [
|
---|
855 | new CopyPlugin({
|
---|
856 | patterns: [...patterns],
|
---|
857 | options: { concurrency: 50 },
|
---|
858 | }),
|
---|
859 | ],
|
---|
860 | };
|
---|
861 | ```
|
---|
862 |
|
---|
863 | ### Examples
|
---|
864 |
|
---|
865 | #### Different variants `from` (`glob`, `file` or `dir`).
|
---|
866 |
|
---|
867 | Take for example the following file structure:
|
---|
868 |
|
---|
869 | ```
|
---|
870 | src/directory-nested/deep-nested/deepnested-file.txt
|
---|
871 | src/directory-nested/nested-file.txt
|
---|
872 | ```
|
---|
873 |
|
---|
874 | ##### From is a Glob
|
---|
875 |
|
---|
876 | Everything that you specify in `from` will be included in the result:
|
---|
877 |
|
---|
878 | **webpack.config.js**
|
---|
879 |
|
---|
880 | ```js
|
---|
881 | module.exports = {
|
---|
882 | plugins: [
|
---|
883 | new CopyPlugin({
|
---|
884 | patterns: [
|
---|
885 | {
|
---|
886 | from: "src/directory-nested/**/*",
|
---|
887 | },
|
---|
888 | ],
|
---|
889 | }),
|
---|
890 | ],
|
---|
891 | };
|
---|
892 | ```
|
---|
893 |
|
---|
894 | Result:
|
---|
895 |
|
---|
896 | ```txt
|
---|
897 | src/directory-nested/deep-nested/deepnested-file.txt,
|
---|
898 | src/directory-nested/nested-file.txt
|
---|
899 | ```
|
---|
900 |
|
---|
901 | If you want only content `src/directory-nested/`, you should only indicate `glob` in `from`. The path to the folder in which the search should take place, should be moved to `context`.
|
---|
902 |
|
---|
903 | **webpack.config.js**
|
---|
904 |
|
---|
905 | ```js
|
---|
906 | module.exports = {
|
---|
907 | plugins: [
|
---|
908 | new CopyPlugin({
|
---|
909 | patterns: [
|
---|
910 | {
|
---|
911 | from: "**/*",
|
---|
912 | context: path.resolve(__dirname, "src", "directory-nested"),
|
---|
913 | },
|
---|
914 | ],
|
---|
915 | }),
|
---|
916 | ],
|
---|
917 | };
|
---|
918 | ```
|
---|
919 |
|
---|
920 | Result:
|
---|
921 |
|
---|
922 | ```txt
|
---|
923 | deep-nested/deepnested-file.txt,
|
---|
924 | nested-file.txt
|
---|
925 | ```
|
---|
926 |
|
---|
927 | ##### From is a Dir
|
---|
928 |
|
---|
929 | **webpack.config.js**
|
---|
930 |
|
---|
931 | ```js
|
---|
932 | module.exports = {
|
---|
933 | plugins: [
|
---|
934 | new CopyPlugin({
|
---|
935 | patterns: [
|
---|
936 | {
|
---|
937 | from: path.resolve(__dirname, "src", "directory-nested"),
|
---|
938 | },
|
---|
939 | ],
|
---|
940 | }),
|
---|
941 | ],
|
---|
942 | };
|
---|
943 | ```
|
---|
944 |
|
---|
945 | Result:
|
---|
946 |
|
---|
947 | ```txt
|
---|
948 | deep-nested/deepnested-file.txt,
|
---|
949 | nested-file.txt
|
---|
950 | ```
|
---|
951 |
|
---|
952 | Technically, this is `**/*` with a predefined context equal to the specified directory.
|
---|
953 |
|
---|
954 | **webpack.config.js**
|
---|
955 |
|
---|
956 | ```js
|
---|
957 | module.exports = {
|
---|
958 | plugins: [
|
---|
959 | new CopyPlugin({
|
---|
960 | patterns: [
|
---|
961 | {
|
---|
962 | from: "**/*",
|
---|
963 | context: path.resolve(__dirname, "src", "directory-nested"),
|
---|
964 | },
|
---|
965 | ],
|
---|
966 | }),
|
---|
967 | ],
|
---|
968 | };
|
---|
969 | ```
|
---|
970 |
|
---|
971 | Result:
|
---|
972 |
|
---|
973 | ```txt
|
---|
974 | deep-nested/deepnested-file.txt,
|
---|
975 | nested-file.txt
|
---|
976 | ```
|
---|
977 |
|
---|
978 | ##### From is a File
|
---|
979 |
|
---|
980 | ```js
|
---|
981 | module.exports = {
|
---|
982 | plugins: [
|
---|
983 | new CopyPlugin({
|
---|
984 | patterns: [
|
---|
985 | {
|
---|
986 | from: path.resolve(
|
---|
987 | __dirname,
|
---|
988 | "src",
|
---|
989 | "directory-nested",
|
---|
990 | "nested-file.txt"
|
---|
991 | ),
|
---|
992 | },
|
---|
993 | ],
|
---|
994 | }),
|
---|
995 | ],
|
---|
996 | };
|
---|
997 | ```
|
---|
998 |
|
---|
999 | Result:
|
---|
1000 |
|
---|
1001 | ```txt
|
---|
1002 | nested-file.txt
|
---|
1003 | ```
|
---|
1004 |
|
---|
1005 | Technically, this is a filename with a predefined context equal to `path.dirname(pathToFile)`.
|
---|
1006 |
|
---|
1007 | **webpack.config.js**
|
---|
1008 |
|
---|
1009 | ```js
|
---|
1010 | module.exports = {
|
---|
1011 | plugins: [
|
---|
1012 | new CopyPlugin({
|
---|
1013 | patterns: [
|
---|
1014 | {
|
---|
1015 | from: "nested-file.txt",
|
---|
1016 | context: path.resolve(__dirname, "src", "directory-nested"),
|
---|
1017 | },
|
---|
1018 | ],
|
---|
1019 | }),
|
---|
1020 | ],
|
---|
1021 | };
|
---|
1022 | ```
|
---|
1023 |
|
---|
1024 | Result:
|
---|
1025 |
|
---|
1026 | ```txt
|
---|
1027 | nested-file.txt
|
---|
1028 | ```
|
---|
1029 |
|
---|
1030 | #### Ignoring files
|
---|
1031 |
|
---|
1032 | **webpack.config.js**
|
---|
1033 |
|
---|
1034 | ```js
|
---|
1035 | module.exports = {
|
---|
1036 | plugins: [
|
---|
1037 | new CopyPlugin({
|
---|
1038 | patterns: [
|
---|
1039 | {
|
---|
1040 | from: path.posix.join(
|
---|
1041 | path.resolve(__dirname, "src").replace(/\\/g, "/"),
|
---|
1042 | "**/*"
|
---|
1043 | ),
|
---|
1044 | globOptions: {
|
---|
1045 | ignore: [
|
---|
1046 | // Ignore all `txt` files
|
---|
1047 | "**/*.txt",
|
---|
1048 | // Ignore all files in all subdirectories
|
---|
1049 | "**/subdir/**",
|
---|
1050 | ],
|
---|
1051 | },
|
---|
1052 | },
|
---|
1053 | ],
|
---|
1054 | }),
|
---|
1055 | ],
|
---|
1056 | };
|
---|
1057 | ```
|
---|
1058 |
|
---|
1059 | #### Flatten copy
|
---|
1060 |
|
---|
1061 | Removes all directory references and only copies file names.
|
---|
1062 |
|
---|
1063 | > ⚠️ If files have the same name, the result is non-deterministic.
|
---|
1064 |
|
---|
1065 | **webpack.config.js**
|
---|
1066 |
|
---|
1067 | ```js
|
---|
1068 | module.exports = {
|
---|
1069 | plugins: [
|
---|
1070 | new CopyPlugin({
|
---|
1071 | patterns: [
|
---|
1072 | {
|
---|
1073 | from: "src/**/*",
|
---|
1074 | to: "[name][ext]",
|
---|
1075 | },
|
---|
1076 | ],
|
---|
1077 | }),
|
---|
1078 | ],
|
---|
1079 | };
|
---|
1080 | ```
|
---|
1081 |
|
---|
1082 | Result:
|
---|
1083 |
|
---|
1084 | ```txt
|
---|
1085 | file-1.txt
|
---|
1086 | file-2.txt
|
---|
1087 | nested-file.txt
|
---|
1088 | ```
|
---|
1089 |
|
---|
1090 | #### Copy in new directory
|
---|
1091 |
|
---|
1092 | **webpack.config.js**
|
---|
1093 |
|
---|
1094 | ```js
|
---|
1095 | module.exports = {
|
---|
1096 | plugins: [
|
---|
1097 | new CopyPlugin({
|
---|
1098 | patterns: [
|
---|
1099 | {
|
---|
1100 | // When copying files starting with a dot, must specify the toType option
|
---|
1101 | // toType: "file",
|
---|
1102 | to({ context, absoluteFilename }) {
|
---|
1103 | return `newdirectory/${path.relative(context, absoluteFilename)}`;
|
---|
1104 | },
|
---|
1105 | from: "directory",
|
---|
1106 | },
|
---|
1107 | ],
|
---|
1108 | }),
|
---|
1109 | ],
|
---|
1110 | };
|
---|
1111 | ```
|
---|
1112 |
|
---|
1113 | Result:
|
---|
1114 |
|
---|
1115 | ```txt
|
---|
1116 | "newdirectory/file-1.txt",
|
---|
1117 | "newdirectory/nestedfile.txt",
|
---|
1118 | "newdirectory/nested/deep-nested/deepnested.txt",
|
---|
1119 | "newdirectory/nested/nestedfile.txt",
|
---|
1120 | ```
|
---|
1121 |
|
---|
1122 | #### Skip running JavaScript files through a minimizer
|
---|
1123 |
|
---|
1124 | Useful if you need to simply copy `*.js` files to destination "as is" without evaluating and minimizing them using Terser.
|
---|
1125 |
|
---|
1126 | **webpack.config.js**
|
---|
1127 |
|
---|
1128 | ```js
|
---|
1129 | module.exports = {
|
---|
1130 | plugins: [
|
---|
1131 | new CopyPlugin({
|
---|
1132 | patterns: [
|
---|
1133 | "relative/path/to/file.ext",
|
---|
1134 | {
|
---|
1135 | from: "**/*",
|
---|
1136 | // Terser skip this file for minimization
|
---|
1137 | info: { minimized: true },
|
---|
1138 | },
|
---|
1139 | ],
|
---|
1140 | }),
|
---|
1141 | ],
|
---|
1142 | };
|
---|
1143 | ```
|
---|
1144 |
|
---|
1145 | ##### `yarn workspaces` and `monorepos`
|
---|
1146 |
|
---|
1147 | When using `yarn workspaces` or` monorepos`, relative copy paths from node_modules can be broken due to the way packages are hoisting.
|
---|
1148 | To avoid this, should explicitly specify where to copy the files from using `require.resolve`.
|
---|
1149 |
|
---|
1150 | **webpack.config.js**
|
---|
1151 |
|
---|
1152 | ```js
|
---|
1153 | module.exports = {
|
---|
1154 | plugins: [
|
---|
1155 | new CopyPlugin({
|
---|
1156 | patterns: [
|
---|
1157 | {
|
---|
1158 | from: `${path.dirname(
|
---|
1159 | require.resolve(`${moduleName}/package.json`)
|
---|
1160 | )}/target`,
|
---|
1161 | to: "target",
|
---|
1162 | },
|
---|
1163 | ],
|
---|
1164 | }),
|
---|
1165 | ],
|
---|
1166 | };
|
---|
1167 | ```
|
---|
1168 |
|
---|
1169 | ## Contributing
|
---|
1170 |
|
---|
1171 | Please take a moment to read our contributing guidelines if you haven't yet done so.
|
---|
1172 |
|
---|
1173 | [CONTRIBUTING](./.github/CONTRIBUTING.md)
|
---|
1174 |
|
---|
1175 | ## License
|
---|
1176 |
|
---|
1177 | [MIT](./LICENSE)
|
---|
1178 |
|
---|
1179 | [npm]: https://img.shields.io/npm/v/copy-webpack-plugin.svg
|
---|
1180 | [npm-url]: https://npmjs.com/package/copy-webpack-plugin
|
---|
1181 | [node]: https://img.shields.io/node/v/copy-webpack-plugin.svg
|
---|
1182 | [node-url]: https://nodejs.org
|
---|
1183 | [deps]: https://david-dm.org/webpack-contrib/copy-webpack-plugin.svg
|
---|
1184 | [deps-url]: https://david-dm.org/webpack-contrib/copy-webpack-plugin
|
---|
1185 | [tests]: https://github.com/webpack-contrib/copy-webpack-plugin/workflows/copy-webpack-plugin/badge.svg
|
---|
1186 | [tests-url]: https://github.com/webpack-contrib/copy-webpack-plugin/actions
|
---|
1187 | [cover]: https://codecov.io/gh/webpack-contrib/copy-webpack-plugin/branch/master/graph/badge.svg
|
---|
1188 | [cover-url]: https://codecov.io/gh/webpack-contrib/copy-webpack-plugin
|
---|
1189 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
---|
1190 | [chat-url]: https://gitter.im/webpack/webpack
|
---|
1191 | [size]: https://packagephobia.now.sh/badge?p=copy-webpack-plugin
|
---|
1192 | [size-url]: https://packagephobia.now.sh/result?p=copy-webpack-plugin
|
---|
1193 | [glob-options]: https://github.com/sindresorhus/globby#options
|
---|