Based on @rollup/plugin-url
This plugin requires an LTS Node version (v8.0.0+) and Rollup v2.0.0+.
Using npm:
npm install rollup-plugin-url-emit --save-dev
Create a rollup.config.js
configuration file and import the plugin:
import url from 'rollup-plugin-url-emit';
export default {
input: 'src/index.js',
output: {
dir: 'output',
format: 'cjs'
},
plugins: [url()]
};
Then call rollup
either via the CLI or the API.
With an accompanying file src/index.js
, the local image.svg
file would now be importable as seen below:
// src/index.js
import svg from './image.svg';
console.log(`svg contents: ${svg}`);
Type: String
| Array[...String]
Default: null
A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
Type: String
| Array[...String]
Default: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif']
A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default .svg, .png, .jpg, and .gif files are targeted.
Type: Number
Default: 14336
(14kb)
The file size limit for inline files. If a file exceeds this limit, it will be copied to the destination folder and the hashed filename will be provided instead. If limit
is set to 0
all files will be copied.
Type: String
Default: (empty string)
A string which will be added in front of filenames when they are not inlined but are copied.
Type: Boolean
Default: true
If false
, will prevent files being emitted by this plugin. This is useful for when you are using Rollup to emit both a client-side and server-side bundle.
Type: String
Default: '[hash][extname]'
If emitFiles
is true
, this option can be used to rename the emitted files. It accepts the following string replacements:
[hash]
- The hash value of the file's contents[name]
- The name of the imported file (without its file extension)[extname]
- The extension of the imported file (including the leading.
)[dirname]
- The parent directory name of the imported file (including trailing/
)
Type: String
Default: (empty string)
When using the [dirname]
replacement in fileName
, use this directory as the source directory from which to create the file path rather than the parent directory of the imported file. For example:
src/path/to/file.js
import png from './image.png';
rollup.config.js
url({
fileName: '[dirname][hash][extname]',
sourceDir: path.join(__dirname, 'src')
});
Emitted File: path/to/image.png