rollup-plugin-copy
for Vite with dev server support.
Note
Before you use this plugin, consider using public directory or import
in JavaScript.
In most cases, these will work.
npm i -D vite-plugin-static-copy # yarn add -D vite-plugin-static-copy
Add viteStaticCopy
plugin to vite.config.js
/ vite.config.ts
.
// vite.config.js / vite.config.ts
import { viteStaticCopy } from 'vite-plugin-static-copy'
export default {
plugins: [
viteStaticCopy({
targets: [
{
src: 'bin/example.wasm',
dest: 'wasm-files'
}
]
})
]
}
For example, if you use the config above, you will be able to fetch bin/example.wasm
with fetch('/wasm-files/example.wasm')
.
So the file will be copied to dist/wasm-files/example.wasm
.
Warning
If you are using Windows, make sure to use normalizePath
after doing path.resolve
or else.
\
is a escape charactor in fast-glob
and you should use /
.
import { normalizePath } from 'vite'
import path from 'node:path'
normalizePath(path.resolve(__dirname, './foo')) // C:/project/foo
// instead of
path.resolve(__dirname, './foo') // C:\project\foo
See fast-glob
documentation about this for more details.
See options.ts.
- Faster dev server start-up than using
rollup-plugin-copy
onbuildStart
hook.- Files are not copied and served directly from the server during dev to reduce start-up time.
dest
is relative tobuild.outDir
.- If you are going to copy files outside
build.outDir
, you could userollup-plugin-copy
instead. Because that does not require dev server support.
- If you are going to copy files outside
fast-glob
is used instead ofglobby
.- Because
fast-glob
is used insidevite
.
- Because
transform
could returnnull
as a way to tell the plugin not to copy the file, this is similar to the CopyWebpackPlugin#filter option, but it expectstransform
to return the original content in case you want it to be copied.transform
can optionally be an object, with ahandler
property (with the same signature of therollup-plugin-copy
transform option) and anencoding
property (BufferEncoding | 'buffer'
) that will be used to read the file content so that thehandler
's content argument will reflect the correct encoding (could be Buffer);structured: true
preserves the directory structure. This is similar toflatten: false
inrollup-plugin-copy
, but it covers more edge cases.