Skip to content

itgalaxy/figlet-loader

Repository files navigation

figlet-loader

NPM version Travis Build Status dependencies Status devDependencies Status peerDependencies Status Greenkeeper badge

Get your figlet build bundled with webpack.

Example

Install

$ npm install figlet-loader --save-dev

Usage

Documentation: Using loaders

There are three use case.

  1. Using loader options.

IMPORTANT: add type: "javascript/auto" if you using webpack@4 and JSON sytax for config.

import content from "figlet"; // or `const content = require('figlet');`

console.log(content);

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: "figlet-loader",
        // ONLY FOR `webpack@4` and `JSON` config
        type: "javascript/auto",
        options: {
          fontOptions: {
            // Full list of supported options and their description can be found in [figlet](https://github.com/patorjk/figlet.js).
            font: "ANSI Shadow",
            horizontalLayout: "default",
            kerning: "default",
            verticalLayout: "default"
          },
          textBefore: "TEXT BEFORE",
          text: "ANOTHER-TEXT",
          textAfter: "TEXT AFTER"
        },
        test: /empty-alias-file\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      // You can add comment "Please do not delete this file" in this file
      figlet$: path.resolve(__dirname, "/path/to/empty-alias-file.js")
    }
  }
};
  1. Using config file through alias (supported JavaScript and JSON syntax).

IMPORTANT: add type: "javascript/auto" if you using webpack@4 and JSON sytax for config.

import context from "figlet"; // or `const content = require('figlet');`

console.log(content);

.figletrc.js

"use strict";

module.exports = {
  fontOptions: {
    font: "ANSI Shadow",
    horizontalLayout: "default",
    kerning: "default",
    verticalLayout: "default"
  },
  textBefore: "TEXT BEFORE",
  text: "ANOTHER-TEXT-JS-RC",
  textAfter: "TEXT AFTER"
};

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: "figlet-loader",
        // ONLY FOR `webpack@4` and `JSON` config
        type: "javascript/auto",
        test: /\.figletrc\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      figlet$: path.resolve(__dirname, "/path/to/.figletrc.js")
    }
  }
};
  1. Using config (supported JavaScript and JSON syntax) file directly (see below example how it is use).

IMPORTANT: add type: "javascript/auto" if you using webpack@4 and JSON sytax for config.

import content from ".figletrc.js";

console.log(content);

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: "figlet-loader",
        // ONLY FOR `webpack@4` and `JSON` config
        type: "javascript/auto",
        test: /\.figletrc\.js$/
      }
    ]
  }
};

Additional Usage

Async loading:

  1. Using webpack dynamic import.
import("figlet").then(content => console.log(content));
  1. You can used bundle plugin for async loading:
import figletLoader from "bundle?lazy!figlet";

figletLoader(content => console.log(content));

Related

  • figlet - API for this module

Contribution

Feel free to push your code if you agree with publishing under the MIT license.