1 | [![npm][npm]][npm-url]
|
2 | [![node][node]][node-url]
|
3 | [![deps][deps]][deps-url]
|
4 | [![test][test]][test-url]
|
5 | [![coverage][cover]][cover-url]
|
6 | [![chat][chat]][chat-url]
|
7 |
|
8 | <div align="center">
|
9 | <a href="https://github.com/webpack/webpack">
|
10 | <img width="200" height="200"
|
11 | src="https://webpack.js.org/assets/icon-square-big.svg">
|
12 | </a>
|
13 | <h1>Copy Webpack Plugin</h1>
|
14 | <p>Copies individual files or entire directories to the build directory</p>
|
15 | </div>
|
16 |
|
17 | <h2 align="center">Install</h2>
|
18 |
|
19 | ```bash
|
20 | npm i -D copy-webpack-plugin
|
21 | ```
|
22 |
|
23 | <h2 align="center">Usage</h2>
|
24 |
|
25 | **webpack.config.js**
|
26 | ```js
|
27 | const CopyWebpackPlugin = require('copy-webpack-plugin')
|
28 |
|
29 | const config = {
|
30 | plugins: [
|
31 | new CopyWebpackPlugin([ ...patterns ], options)
|
32 | ]
|
33 | }
|
34 | ```
|
35 |
|
36 | > ℹ️ If you want `webpack-dev-server` to write files to the output directory during development, you can force it with the [`write-file-webpack-plugin`](https://github.com/gajus/write-file-webpack-plugin).
|
37 |
|
38 | ### `Patterns`
|
39 |
|
40 | A simple pattern looks like this
|
41 |
|
42 | ```js
|
43 | { from: 'source', to: 'dest' }
|
44 | ```
|
45 |
|
46 | Or, in case of just a `from` with the default destination, you can also use a `{String}` as shorthand instead of an `{Object}`
|
47 |
|
48 | ```js
|
49 | 'source'
|
50 | ```
|
51 |
|
52 | |Name|Type|Default|Description|
|
53 | |:--:|:--:|:-----:|:----------|
|
54 | |[`from`](#from)|`{String\|Object}`|`undefined`|Globs accept [minimatch options](https://github.com/isaacs/minimatch)|
|
55 | |[`fromArgs`](#fromArgs)|`{Object}`|`{ cwd: context }`|See the [`node-glob` options](https://github.com/isaacs/node-glob#options) in addition to the ones below|
|
56 | |[`to`](#to)|`{String\|Object}`|`undefined`|Output root if `from` is file or dir, resolved glob path if `from` is glob|
|
57 | |[`toType`](#toType)|`{String}`|``|[toType Options](#totype)|
|
58 | |[`test`](#test)|`{RegExp}`|``|Pattern for extracting elements to be used in `to` templates|
|
59 | |[`force`](#force)|`{Boolean}`|`false`|Overwrites files already in `compilation.assets` (usually added by other plugins/loaders)|
|
60 | |[`ignore`](#ignore)|`{Array}`|`[]`|Globs to ignore for this pattern|
|
61 | |`flatten`|`{Boolean}`|`false`|Removes all directory references and only copies file names.⚠️ If files have the same name, the result is non-deterministic|
|
62 | |[`transform`](#transform)|`{Function\|Promise}`|`(content, path) => content`|Function or Promise that modifies file contents before copying|
|
63 | |[`transformPath`](#transformPath)|`{Function\|Promise}`|`(targetPath, sourcePath) => path`|Function or Promise that modifies file writing path|
|
64 | |[`cache`](#cache)|`{Boolean\|Object}`|`false`|Enable `transform` caching. You can use `{ cache: { key: 'my-cache-key' } }` to invalidate the cache|
|
65 | |[`context`](#context)|`{String}`|`options.context \|\| compiler.options.context`|A path that determines how to interpret the `from` path|
|
66 |
|
67 | ### `from`
|
68 |
|
69 | **webpack.config.js**
|
70 | ```js
|
71 | [
|
72 | new CopyWebpackPlugin([
|
73 | 'relative/path/to/file.ext',
|
74 | '/absolute/path/to/file.ext',
|
75 | 'relative/path/to/dir',
|
76 | '/absolute/path/to/dir',
|
77 | '**/*',
|
78 | { glob: '\*\*/\*', dot: true }
|
79 | ], options)
|
80 | ]
|
81 | ```
|
82 |
|
83 | ### `to`
|
84 |
|
85 | **webpack.config.js**
|
86 | ```js
|
87 | [
|
88 | new CopyWebpackPlugin([
|
89 | { from: '**/*', to: 'relative/path/to/dest/' },
|
90 | { from: '**/*', to: '/absolute/path/to/dest/' }
|
91 | ], options)
|
92 | ]
|
93 | ```
|
94 |
|
95 | ### `toType`
|
96 |
|
97 | |Name|Type|Default|Description|
|
98 | |:--:|:--:|:-----:|:----------|
|
99 | |**`'dir'`**|`{String}`|`undefined`|If `from` is directory, `to` has no extension or ends in `'/'`|
|
100 | |**`'file'`**|`{String}`|`undefined`|If `to` has extension or `from` is file|
|
101 | |**`'template'`**|`{String}`|`undefined`|If `to` contains [a template pattern](https://github.com/webpack-contrib/file-loader#placeholders)|
|
102 |
|
103 | #### `'dir'`
|
104 |
|
105 | **webpack.config.js**
|
106 | ```js
|
107 | [
|
108 | new CopyWebpackPlugin([
|
109 | {
|
110 | from: 'path/to/file.txt',
|
111 | to: 'directory/with/extension.ext',
|
112 | toType: 'dir'
|
113 | }
|
114 | ], options)
|
115 | ]
|
116 | ```
|
117 |
|
118 | #### `'file'`
|
119 |
|
120 | **webpack.config.js**
|
121 | ```js
|
122 | [
|
123 | new CopyWebpackPlugin([
|
124 | {
|
125 | from: 'path/to/file.txt',
|
126 | to: 'file/without/extension',
|
127 | toType: 'file'
|
128 | },
|
129 | ], options)
|
130 | ]
|
131 | ```
|
132 |
|
133 | #### `'template'`
|
134 |
|
135 | **webpack.config.js**
|
136 | ```js
|
137 | [
|
138 | new CopyWebpackPlugin([
|
139 | {
|
140 | from: 'src/',
|
141 | to: 'dest/[name].[hash].[ext]',
|
142 | toType: 'template'
|
143 | }
|
144 | ], options)
|
145 | ]
|
146 | ```
|
147 |
|
148 | ### `test`
|
149 |
|
150 | Defines a `{RegExp}` to match some parts of the file path.
|
151 | These capture groups can be reused in the name property using `[N]` placeholder.
|
152 | Note that `[0]` will be replaced by the entire path of the file,
|
153 | whereas `[1]` will contain the first capturing parenthesis of your `{RegExp}`
|
154 | and so on...
|
155 |
|
156 | **webpack.config.js**
|
157 | ```js
|
158 | [
|
159 | new CopyWebpackPlugin([
|
160 | {
|
161 | from: '*/*',
|
162 | to: '[1]-[2].[hash].[ext]',
|
163 | test: /([^/]+)\/(.+)\.png$/
|
164 | }
|
165 | ], options)
|
166 | ]
|
167 | ```
|
168 |
|
169 | ### `force`
|
170 |
|
171 | **webpack.config.js**
|
172 | ```js
|
173 | [
|
174 | new CopyWebpackPlugin([
|
175 | { from: 'src/**/*', to: 'dest/', force: true }
|
176 | ], options)
|
177 | ]
|
178 | ```
|
179 |
|
180 | ### `ignore`
|
181 |
|
182 | **webpack.config.js**
|
183 | ```js
|
184 | [
|
185 | new CopyWebpackPlugin([
|
186 | { from: 'src/**/*', to: 'dest/', ignore: [ '*.js' ] }
|
187 | ], options)
|
188 | ]
|
189 | ```
|
190 |
|
191 | ### `flatten`
|
192 |
|
193 | **webpack.config.js**
|
194 | ```js
|
195 | [
|
196 | new CopyWebpackPlugin([
|
197 | { from: 'src/**/*', to: 'dest/', flatten: true }
|
198 | ], options)
|
199 | ]
|
200 | ```
|
201 |
|
202 | ### `transform`
|
203 |
|
204 | #### `{Function}`
|
205 |
|
206 | **webpack.config.js**
|
207 | ```js
|
208 | [
|
209 | new CopyWebpackPlugin([
|
210 | {
|
211 | from: 'src/*.png',
|
212 | to: 'dest/',
|
213 | transform (content, path) {
|
214 | return optimize(content)
|
215 | }
|
216 | }
|
217 | ], options)
|
218 | ]
|
219 | ```
|
220 |
|
221 | #### `{Promise}`
|
222 |
|
223 | **webpack.config.js**
|
224 | ```js
|
225 | [
|
226 | new CopyWebpackPlugin([
|
227 | {
|
228 | from: 'src/*.png',
|
229 | to: 'dest/',
|
230 | transform (content, path) {
|
231 | return Promise.resolve(optimize(content))
|
232 | }
|
233 | }
|
234 | ], options)
|
235 | ]
|
236 | ```
|
237 |
|
238 | ### `transformPath`
|
239 |
|
240 | #### `{Function}`
|
241 |
|
242 | **webpack.config.js**
|
243 | ```js
|
244 | [
|
245 | new CopyWebpackPlugin([
|
246 | {
|
247 | from: 'src/*.png',
|
248 | to: 'dest/',
|
249 | transformPath (targetPath, absolutePath) {
|
250 | return 'newPath';
|
251 | }
|
252 | }
|
253 | ], options)
|
254 | ]
|
255 | ```
|
256 |
|
257 | #### `{Promise}`
|
258 |
|
259 | **webpack.config.js**
|
260 | ```js
|
261 | [
|
262 | new CopyWebpackPlugin([
|
263 | {
|
264 | from: 'src/*.png',
|
265 | to: 'dest/',
|
266 | transform (targePath, absolutePath) {
|
267 | return Promise.resolve('newPath')
|
268 | }
|
269 | }
|
270 | ], options)
|
271 | ]
|
272 | ```
|
273 |
|
274 |
|
275 | ### `cache`
|
276 |
|
277 | **webpack.config.js**
|
278 | ```js
|
279 | [
|
280 | new CopyWebpackPlugin([
|
281 | {
|
282 | from: 'src/*.png',
|
283 | to: 'dest/',
|
284 | transform (content, path) {
|
285 | return optimize(content)
|
286 | },
|
287 | cache: true
|
288 | }
|
289 | ], options)
|
290 | ]
|
291 | ```
|
292 |
|
293 | ### `context`
|
294 |
|
295 | **webpack.config.js**
|
296 | ```js
|
297 | [
|
298 | new CopyWebpackPlugin([
|
299 | { from: 'src/*.txt', to: 'dest/', context: 'app/' }
|
300 | ], options)
|
301 | ]
|
302 | ```
|
303 |
|
304 | <h2 align="center">Options</h2>
|
305 |
|
306 | |Name|Type|Default|Description|
|
307 | |:--:|:--:|:-----:|:----------|
|
308 | |[`debug`](#debug)|`{String}`|**`'warning'`**|[Debug Options](#debug)|
|
309 | |[`ignore`](#ignore)|`{Array}`|`[]`|Array of globs to ignore (applied to `from`)|
|
310 | |[`context`](#context)|`{String}`|`compiler.options.context`|A path that determines how to interpret the `from` path, shared for all patterns|
|
311 | |[`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|
|
312 |
|
313 | ### `debug`
|
314 |
|
315 | |Name|Type|Default|Description|
|
316 | |:--:|:--:|:-----:|:----------|
|
317 | |**`'info'`**|`{String\|Boolean}`|`false`|File location and read info|
|
318 | |**`'debug'`**|`{String}`|`false`|Very detailed debugging info|
|
319 | |**`'warning'`**|`{String}`|`true`|Only warnings|
|
320 |
|
321 | #### `'info'`
|
322 |
|
323 | **webpack.config.js**
|
324 | ```js
|
325 | [
|
326 | new CopyWebpackPlugin(
|
327 | [ ...patterns ],
|
328 | { debug: 'info' }
|
329 | )
|
330 | ]
|
331 | ```
|
332 |
|
333 | #### `'debug'`
|
334 |
|
335 | **webpack.config.js**
|
336 | ```js
|
337 | [
|
338 | new CopyWebpackPlugin(
|
339 | [ ...patterns ],
|
340 | { debug: 'debug' }
|
341 | )
|
342 | ]
|
343 | ```
|
344 |
|
345 | #### `'warning' (default)`
|
346 |
|
347 | **webpack.config.js**
|
348 | ```js
|
349 | [
|
350 | new CopyWebpackPlugin(
|
351 | [ ...patterns ],
|
352 | { debug: true }
|
353 | )
|
354 | ]
|
355 | ```
|
356 |
|
357 | ### `ignore`
|
358 |
|
359 | **webpack.config.js**
|
360 | ```js
|
361 | [
|
362 | new CopyWebpackPlugin(
|
363 | [ ...patterns ],
|
364 | { ignore: [ '*.js', '*.css' ] }
|
365 | )
|
366 | ]
|
367 | ```
|
368 |
|
369 | ### `context`
|
370 |
|
371 | **webpack.config.js**
|
372 | ```js
|
373 | [
|
374 | new CopyWebpackPlugin(
|
375 | [ ...patterns ],
|
376 | { context: '/app' }
|
377 | )
|
378 | ]
|
379 | ```
|
380 |
|
381 | ### `copyUnmodified`
|
382 |
|
383 | > ℹ️ 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.
|
384 |
|
385 | **webpack.config.js**
|
386 | ```js
|
387 | [
|
388 | new CopyWebpackPlugin(
|
389 | [ ...patterns ],
|
390 | { copyUnmodified: true }
|
391 | )
|
392 | ]
|
393 | ```
|
394 |
|
395 | <h2 align="center">Maintainers</h2>
|
396 |
|
397 | <table>
|
398 | <tbody>
|
399 | <tr>
|
400 | <td align="center">
|
401 | <a href="https://github.com/bebraw">
|
402 | <img width="150" height="150" src="https://github.com/bebraw.png?v=3&s=150">
|
403 | </br>
|
404 | Juho Vepsäläinen
|
405 | </a>
|
406 | </td>
|
407 | <td align="center">
|
408 | <a href="https://github.com/d3viant0ne">
|
409 | <img width="150" height="150" src="https://github.com/d3viant0ne.png?v=3&s=150">
|
410 | </br>
|
411 | Joshua Wiens
|
412 | </a>
|
413 | </td>
|
414 | <td align="center">
|
415 | <a href="https://github.com/michael-ciniawsky">
|
416 | <img width="150" height="150" src="https://github.com/michael-ciniawsky.png?v=3&s=150">
|
417 | </br>
|
418 | Michael Ciniawsky
|
419 | </a>
|
420 | </td>
|
421 | <td align="center">
|
422 | <a href="https://github.com/evilebottnawi">
|
423 | <img width="150" height="150" src="https://github.com/evilebottnawi.png?v=3&s=150">
|
424 | </br>
|
425 | Alexander Krasnoyarov
|
426 | </a>
|
427 | </td>
|
428 | </tr>
|
429 | <tbody>
|
430 | </table>
|
431 |
|
432 |
|
433 | [npm]: https://img.shields.io/npm/v/copy-webpack-plugin.svg
|
434 | [npm-url]: https://npmjs.com/package/copy-webpack-plugin
|
435 |
|
436 | [node]: https://img.shields.io/node/v/copy-webpack-plugin.svg
|
437 | [node-url]: https://nodejs.org
|
438 |
|
439 | [deps]: https://david-dm.org/webpack-contrib/copy-webpack-plugin.svg
|
440 | [deps-url]: https://david-dm.org/webpack-contrib/copy-webpack-plugin
|
441 |
|
442 | [test]: https://secure.travis-ci.org/webpack-contrib/copy-webpack-plugin.svg
|
443 | [test-url]: http://travis-ci.org/webpack-contrib/copy-webpack-plugin
|
444 |
|
445 | [cover]: https://codecov.io/gh/webpack-contrib/copy-webpack-plugin/branch/master/graph/badge.svg
|
446 | [cover-url]: https://codecov.io/gh/webpack-contrib/copy-webpack-plugin
|
447 |
|
448 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
449 | [chat-url]: https://gitter.im/webpack/webpack
|