webpack-gallery-plugin
A webpack plugin to provide a global object representing a detailed gallery tree view.
Getting started
You first need to install webpack-gallery-plugin
as a development dependency by running the following command:
npm install webpack-gallery-plugin --save-dev
You can then add the plugin to your webpack
config. For example:
// webpack.config.js
const GalleryPlugin = require("webpack-gallery-plugin");
module.exports = {
plugins: [
new GalleryPlugin({
source: '/assets',
}),
],
};
Options
Name | Type | Required | Default | Description |
---|---|---|---|---|
source |
{String} |
true |
undefined |
Path to the target folder, relative to the webpack config file. |
publicPath |
{String} |
false |
"/" |
Public path of the target folder. |
outputName |
{String} |
false |
"default" |
Output name, generated constant will be GALLERY_{outputName} . |
ignoreTypes |
{Array} |
false |
undefined |
Ignored file types. |
ignorePatterns |
{Array} |
false |
[".*/"] |
Ignore patterns. |
extensions |
{Object} |
false |
undefined |
Custom extensions map. |
verbose |
{Boolean} |
false |
false |
Verbose mode. |
Supported file types
Image |
Audio |
Video |
---|---|---|
.bmp |
.mp3 |
.mp4 |
.cur |
.ogg |
.mov |
.dds |
.m4a |
.wmv |
.gif |
.flac |
.flv |
.ktx |
.wav |
.avi |
.png |
.wma |
.mkv |
.pnm |
.aac |
|
.pam |
||
.pbm |
||
.pfm |
||
.pgm |
||
.ppm |
||
.psd |
||
.svg |
||
.icon |
||
.jpg |
||
.jpeg |
||
.icns |
||
.tiff |
||
.webp |
Custom extensions map
You can extend the default supported file typed by adding your own extension: type
entries into
the option's extensions
parameter.
exemple
// webpack.config.js
const GalleryPlugin = require("webpack-gallery-plugin");
module.exports = {
plugins: [
new GalleryPlugin({
source: '/assets',
extensions: {
tiff: 'image',
mp4: 'audio',
txt: 'poetry',
},
}),
],
};
⚠️ If you respecify any of the default supported file types through theextensions
parameter, the default type (image/audio/video) will be overwritten.
⚠️ type
s other thanimage
,audio
,video
will be preserved but wont provide any relevant data but thepath
and anid
.
Provide additional details
Each sniffed folder can provide a gallery.details.json
file which is being parsed to find and
concatenate any additional data of your choice (e.g. a simple description or its author). Simply
specify the relative file path as a key and its details as an object value.