English | 中文
A Vite Plugin extracts resource files referenced in library mode
instead of embedded them as base64.
npm i @laynezh/vite-plugin-lib-assets -D
Or
yarn add @laynezh/vite-plugin-lib-assets -D
Or
pnpm add @laynezh/vite-plugin-lib-assets -D
Notice: The plugin only accepts either Array<'es' | 'cjs'>
or Array<'umd' | 'iife'>
as the build.lib.formats
option. If you wish to build both es
and umd
formats, please create separate builds for each.
// vite.config.ts
import libAssetsPlugin from '@laynezh/vite-plugin-lib-assets'
export default defineConfig({
plugins: [
libAssetsPlugin({ /* options */ }),
],
})
Example: playground/
export interface Options {
name?: string | ((resourcePath: string, resourceQuery: string) => string)
limit?: number
extensions?: string[]
outputPath?: string | ((url: string, resourcePath: string, resourceQuery: string) => string)
regExp?: RegExp
publicUrl?: string
}
Output name of the resource file, its usage aligns with the name
option of the file-loader
.
- Type:
string | ((resourcePath: string, resourceQuery: string) => string)
- Default:
'[contenthash].[ext]'
- Example:
string
libAssetsPlugin({ name: '[name].[contenthash:8].[ext]?[query]' })
function
libAssetsPlugin({ name: (resourcePath, resourceQuery) => { // `resourcePath` - `/absolute/path/to/file.js` // `resourceQuery` - `foo=bar` if (process.env.NODE_ENV === 'development') { return '[name].[ext]'; } return '[name].[contenthash:8].[ext]?[query]' }, })
The complete list can be found at
loader-utils#interpolatename
Files larger than the limit
will be extracted to the output directory, smaller files will remain embedded in the artifact in base64 format.
- Type:
number
,unitByte
- Default:
undefined
,any size of resource files will be extracted - Example:
libAssetsPlugin({ limit: 1024 * 8 // 8KB })
File types to be processed.
- Type:
string[]
- Default:
['.jpg', '.jpeg', '.png', '.apng', '.gif', '.bmp', '.svg', '.webp']
- Example:
libAssetsPlugin({ // Only process the following file types extensions: ['.jpg', '.png', '.webp'] })
Specify the output path where the extracted files will be placed, its usage aligns with the outputPath
option of the file-loader
.
- Type:
string | ((url: string, resourcePath: string, resourceQuery: string) => string)
- Default:
Vite
'sassetsDir
configuration. - Example:
string
libAssetsPlugin({ outputPath: 'images' })
function
libAssetsPlugin({ outputPath: (url, resourcePath, resourceQuery) => { // `url` - file name processed by the `name` option,eg: `logo.fb2133.png` // `resourcePath` - `/original/absolute/path/to/file.js` // `resourceQuery` - `foo=bar` return url.endsWith('.png') ? 'image' : 'assets' }, })
Specifies a Regular Expression to extract parts of content(capture groups) from the file path and use [N] as placeholders in the name
for replacement. Its usage aligns with the regexp
option of the file-loader
.
- Type:
RegExp
- Default:
undefined
- Example:
libAssetsPlugin({ regExp: /\/([^/]+)\/[^\.]+.png$/, name: '[1]-[name].[contenthash:8].[ext]' })
Access path prefix for built resource files in the browser. Applies exclusively to umd | iife
format builds.
- Type:
string
- Default:
''
- Example:
libAssetsPlugin({ publicUrl: 'https://cdn.jsdelivr.net/npm/@laynezh/vite-plugin-lib-assets' })