sfcode
An Online Competing and Development Environment
|
Copies individual files or entire directories, which already exist, to the build directory.
To begin, you'll need to install copy-webpack-plugin
:
Then add the plugin to your webpack
config. For example:
webpack.config.js
ℹ️
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.
ℹ️ If you want
webpack-dev-server
to write files to the output directory during development, you can force it with thewriteToDisk
option or thewrite-file-webpack-plugin
.
The plugin's signature:
webpack.config.js
Name | Type | Default | Description | |
---|---|---|---|---|
from | {String} | undefined | Glob or path from where we сopy files. | |
to | {String} | compiler.options.output | Output path. | |
context | {String} | options.context \|\| compiler.options.context | A path that determines how to interpret the from path. | |
globOptions | {Object} | undefined | Options passed to the glob pattern matching library including ignore option. | |
toType | {String} | undefined | Determinate what is to option - directory, file or template. | |
force | {Boolean} | false | Overwrites files already in compilation.assets (usually added by other plugins/loaders). | |
flatten | {Boolean} | false | Removes all directory references and only copies file names. | |
transform | {Function} | undefined | Allows to modify the file contents. | |
cacheTransform | {Boolean\|String\|Object} | false | Enable transform caching. You can use ‘{ cache: { key: 'my-cache-key’ } }to invalidate the cache. \ilinebr </td> </tr> <tr class="markdownTableRowEven"> <td class="markdownTableBodyCenter"> [ transformPath](#transformpath) \ilinebr </td> <td class="markdownTableBodyCenter"> {Function}\ilinebr </td> <td class="markdownTableBodyCenter"> undefined\ilinebr </td> <td class="markdownTableBodyLeft"> Allows to modify the writing path. \ilinebr </td> </tr> <tr class="markdownTableRowOdd"> <td class="markdownTableBodyCenter"> [ noErrorOnMissing](#noerroronmissing) \ilinebr </td> <td class="markdownTableBodyCenter"> {Boolean}\ilinebr </td> <td class="markdownTableBodyCenter"> false` | Doesn't generate an error on missing file(s). |
Type: String
Default: undefined
Glob or path from where we сopy files. Globs accept fast-glob pattern-syntax. Glob can only be a string
.
⚠️ Don't use directly
\\
infrom
option if it is aglob
(i.epath\to\file.ext
) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator. On Windows, the forward slash and the backward slash are both separators. Instead please use/
.
webpack.config.js
For windows
If you define from
as absolute file path or absolute folder path on Windows
, you can use windows path segment (\\
)
But you should always use forward-slashes in glob
expressions See fast-glob manual.
The context
behaves differently depending on what the from
is (glob
, file
or dir
). More examples
Type: String
Default: compiler.options.output
Output path.
⚠️ Don't use directly
\\
into
(i.epath\to\dest
) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator. On Windows, the forward slash and the backward slash are both separators. Instead please use/
orpath
methods.
webpack.config.js
Type: String
Default: options.context|compiler.options.context
A path that determines how to interpret the from
path.
⚠️ Don't use directly
\\
incontext
(i.epath\to\context
) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator. On Windows, the forward slash and the backward slash are both separators. Instead please use/
orpath
methods.
webpack.config.js
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
Also, context
indicates how to interpret the search results. Further, he is considered in this role.
To determine the structure from which the found resources will be copied to the destination folder, the context
option is used.
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.
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.
If from
is a glob, then regardless of the context
option, the result will be the structure specified in the from
option
More examples
Type: Object
Default: undefined
Allows to configute the glob pattern matching library used by the plugin. See the list of supported options To exclude files from the selection, you should use globOptions.ignore option
webpack.config.js
Type: String
Default: undefined
Determinate what is to
option - directory, file or template. Sometimes it is hard to say what is to
, example path/to/dir-with.ext
. If you want to copy files in directory you need use dir
option. We try to automatically determine the type
so you most likely do not need this option.
Name | Type | Default | Description |
---|---|---|---|
**‘'dir’** \ilinebr </td> <td class="markdownTableBodyCenter"> {String}\ilinebr </td> <td class="markdownTableBodyCenter"> undefined\ilinebr </td> <td class="markdownTableBodyLeft"> If tohas no extension or ends on '/'\ilinebr </td> </tr> <tr class="markdownTableRowEven"> <td class="markdownTableBodyCenter"> ** 'file'** \ilinebr </td> <td class="markdownTableBodyCenter"> {String}\ilinebr </td> <td class="markdownTableBodyCenter"> undefined\ilinebr </td> <td class="markdownTableBodyLeft"> If tois not a directory and is not a template \ilinebr </td> </tr> <tr class="markdownTableRowOdd"> <td class="markdownTableBodyCenter"> ** 'template'** \ilinebr </td> <td class="markdownTableBodyCenter"> {String}\ilinebr </td> <td class="markdownTableBodyCenter"> undefined\ilinebr </td> <td class="markdownTableBodyLeft"> If to` contains a template pattern |
webpack.config.js
webpack.config.js
webpack.config.js
Type: Boolean
Default: false
Overwrites files already in compilation.assets
(usually added by other plugins/loaders).
webpack.config.js
Type: Boolean
Default: false
Removes all directory references and only copies file names.
⚠️ If files have the same name, the result is non-deterministic.
webpack.config.js
Type: Function
Default: undefined
Allows to modify the file contents.
webpack.config.js
webpack.config.js
Type: Boolean|String|Object
Default: false
Enable/disable and configure caching. Default path to cache directory: node_modules/.cache/copy-webpack-plugin
.
Boolean
Enables/Disable transform
caching.
webpack.config.js
String
Enables transform
caching and setup cache directory.
webpack.config.js
Object
Enables transform
caching and setup cache directory and invalidation keys.
webpack.config.js
You can setup invalidation keys using a function.
Simple function:
webpack.config.js
Async function:
webpack.config.js
Type: Function
Default: undefined
Allows to modify the writing path.
⚠️ Don't return directly
\\
intransformPath
(i.epath\to\newFile
) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator. On Windows, the forward slash and the backward slash are both separators. Instead please use/
orpath
methods.
webpack.config.js
webpack.config.js
Type: Boolean
Default: false
Doesn't generate an error on missing file(s);
Name | Type | Default | Description |
---|---|---|---|
concurrency | {Number} | 100 | Limits the number of simultaneous requests to fs |
limits the number of simultaneous requests to fs
webpack.config.js
Take for example the following file structure:
Everything that you specify in from
will be included in the result:
webpack.config.js
Result:
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
.
webpack.config.js
Result:
webpack.config.js
Result:
Technically, this is **/*
with a predefined context equal to the specified directory.
webpack.config.js
Result:
Result:
Technically, this is a filename with a predefined context equal to path.dirname(pathToFile)
.
webpack.config.js
Result:
webpack.config.js
Please take a moment to read our contributing guidelines if you haven't yet done so.
./.github/CONTRIBUTING.md "CONTRIBUTING"