webpack-gallery-plugin
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

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 the extensions parameter, the default type (image/audio/video) will be overwritten.

⚠️ types other than image, audio, video will be preserved but wont provide any relevant data but the path and an id.

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.

Package Sidebar

Install

npm i webpack-gallery-plugin

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

32.4 kB

Total Files

19

Last publish

Collaborators

  • charles.gruenais