drupal-librarify-webpack-plugin

Prepare and create the library.yml file for Drupal.

Getting Started

To begin, you’ll need to install drupal-librarify-webpack-plugin:

$ npm install drupal-librarify-webpack-plugin --save-dev

Then add the plugin to your webpack config. For example:

webpack.config.js

const DrupalLibrarifyPlugin = require('drupal-librarify-webpack-plugin');

module.exports = {
  plugins: [new DrupalLibrarifyPlugin()],
};

And run webpack via your preferred method.

Options

| Name | Type | Default | Description | | :———————————: | :——————: | :——————————————————————————————————————————: | :———————————————————————————————————————— | | version | {Boolean\|String} | undefined | Include version in library.yaml assertion | | header | {Boolean} | false | Indicate that the JavaScript assets in that asset library are in the ‘critical path’ and should be loaded from the header | | prefix | {String\|Function} | drupal. | Prefix your libary name | | minified | {String\|Boolean} | auto | Global css minified options. | | js | {Object} | {} | In order to override js options for your library. | | **[css](#css)** | {Object} | {} | In order to override css options for your library. | | **[dependencies](#dependencies)** | {Array|Object} | { ‘core/jquery’: true, ‘core/jquery.once’: true, ‘core/drupal’: true, ‘core/drupal.form’: false, ‘core/drupalSettings’: true } | Manually specify the dependencies for your library | | **[weight](#weight)** | {Number} | undefined` | Adjusts order relative to other assets. Discouraged for JS |

version

Type: Boolean\|String Default: undefined

Include version in library.yaml. If true, then it will “guess” the version in the package.json file.

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      version: '1.0.0',
    }),
  ],
};

header

Type: Boolean Default: false

Indicate that the JavaScript assets in that asset library are in the ‘critical path’ and should be loaded from the header.

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      header: true,
    }),
  ],
};

prefix

Type: String|Function Default: drupal.

Prefix your library name.

String

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      prefix: 'custom.',
    }),
  ],
};

Function

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      prefix(info) {
        // info.file is the original asset filename
        // info.path is the path of the original asset
        // info.query is the query
        return `${info.path}.${info.query}.`;
      },
    }),
  ],
};

minified

Type: Boolean\|String Default: auto

Global css minified options.

Boolean

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      minified: false,
    }),
  ],
};

String

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      minified: 'auto',
    }),
  ],
};

js

Type: Object Default: {}

In order to override js options for your library.

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      js: {
        'my/library/path/filename.js': {
          preprocess: false,
        },
      },
    }),
  ],
};

css

Type: Object Default: {}

In order to override css options for your library.

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      css: {
        'my/library/path/filename.css': {
          minified: true,
        },
      },
    }),
  ],
};

dependencies

Type: Array\|Object Default: { 'core/jquery': true, 'core/jquery.once': true, 'core/drupal': true, 'core/drupal.form': false, 'core/drupalSettings': true }

In order to override css options for your library.

webpack.config.js

Array

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      dependencies: ['core/drupal.form'],
    }),
  ],
};

Object

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      dependencies: {
        'core/jquery.once': false,
        'core/drupal.form': true,
      },
    }),
  ],
};

weight

Type: Number Default: undefined

Adjusts order relative to other assets. Discouraged for JS.

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      weight: -10,
    }),
  ],
};

entries

Type: Object Default: {}

In order to override entries options for your library.

webpack.config.js

module.exports = {
  plugins: [
    new DrupalLibrarifyPlugin({
      entries: {
        mySublibraryModule: {
          version: '2.0.0',
        },
      },
    }),
  ],
};

Contributing

Please take a moment to read our contributing guidelines if you haven’t yet done so.

CONTRIBUTING

License

MIT