html-webpack-plugin

  • Version 5.6.3
  • Published
  • 135 kB
  • 5 dependencies
  • MIT license

Install

npm i html-webpack-plugin
yarn add html-webpack-plugin
pnpm add html-webpack-plugin

Overview

Simplifies creation of HTML files to serve your webpack bundles

Index

Classes

class HtmlWebpackPlugin

class HtmlWebpackPlugin {}

    constructor

    constructor(options?: HtmlWebpackPlugin.Options);

      property options

      options?: HtmlWebpackPlugin.ProcessedOptions;
      • Options after html-webpack-plugin has been initialized with defaults

      property userOptions

      userOptions: HtmlWebpackPlugin.Options;

        property version

        static readonly version: number;

          property version

          version: number;
          • Current HtmlWebpackPlugin Major

          method apply

          apply: (compiler: Compiler) => void;

            method createHtmlTagObject

            static createHtmlTagObject: (
            tagName: string,
            attributes?: { [attributeName: string]: string | boolean },
            innerHTML?: string
            ) => HtmlWebpackPlugin.HtmlTagObject;
            • Static helper to create a tag object to be get injected into the dom

            method getCompilationHooks

            static getCompilationHooks: (
            compilation: Compilation
            ) => HtmlWebpackPlugin.Hooks;

              method getHooks

              static getHooks: (compilation: Compilation) => HtmlWebpackPlugin.Hooks;

                Interfaces

                interface Hooks

                interface Hooks {}

                  property afterEmit

                  afterEmit: AsyncSeriesWaterfallHook<{
                  outputName: string;
                  plugin: HtmlWebpackPlugin;
                  }>;

                    property afterTemplateExecution

                    afterTemplateExecution: AsyncSeriesWaterfallHook<{
                    html: string;
                    headTags: HtmlTagObject[];
                    bodyTags: HtmlTagObject[];
                    outputName: string;
                    plugin: HtmlWebpackPlugin;
                    }>;

                      property alterAssetTagGroups

                      alterAssetTagGroups: AsyncSeriesWaterfallHook<{
                      headTags: HtmlTagObject[];
                      bodyTags: HtmlTagObject[];
                      outputName: string;
                      publicPath: string;
                      plugin: HtmlWebpackPlugin;
                      }>;

                        property alterAssetTags

                        alterAssetTags: AsyncSeriesWaterfallHook<{
                        assetTags: {
                        scripts: HtmlTagObject[];
                        styles: HtmlTagObject[];
                        meta: HtmlTagObject[];
                        };
                        publicPath: string;
                        outputName: string;
                        plugin: HtmlWebpackPlugin;
                        }>;

                          property beforeAssetTagGeneration

                          beforeAssetTagGeneration: AsyncSeriesWaterfallHook<{
                          assets: {
                          publicPath: string;
                          js: Array<string>;
                          css: Array<string>;
                          favicon?: string;
                          manifest?: string;
                          };
                          outputName: string;
                          plugin: HtmlWebpackPlugin;
                          }>;

                            property beforeEmit

                            beforeEmit: AsyncSeriesWaterfallHook<{
                            html: string;
                            outputName: string;
                            plugin: HtmlWebpackPlugin;
                            }>;

                              interface HtmlTagObject

                              interface HtmlTagObject {}
                              • A tag element according to the htmlWebpackPlugin object notation

                              property attributes

                              attributes: {
                              [attributeName: string]: string | boolean | null | undefined;
                              };
                              • Attributes of the html tag E.g. {'disabled': true, 'value': 'demo'}

                              property innerHTML

                              innerHTML?: string;
                              • The inner HTML

                              property meta

                              meta: {
                              plugin?: string;
                              [metaAttributeName: string]: any;
                              };
                              • Meta information about the tag E.g. {'plugin': 'html-webpack-plugin'}

                              property tagName

                              tagName: string;
                              • The tag name e.g. 'div'

                              property voidTag

                              voidTag: boolean;
                              • Whether this html must not contain innerHTML

                                See Also

                                • https://www.w3.org/TR/html5/syntax.html#void-elements

                              interface Options

                              interface Options {}

                                property cache

                                cache?: boolean;
                                • Emit the file only if it was changed. true

                                property chunks

                                chunks?: 'all' | string[];
                                • List all entries which should be injected

                                property chunksSortMode

                                chunksSortMode?:
                                | 'auto'
                                // `none` is deprecated and an alias for `auto` now.
                                | 'none'
                                | 'manual'
                                | ((entryNameA: string, entryNameB: string) => number);
                                • Allows to control how chunks should be sorted before they are included to the html. 'auto'

                                property excludeChunks

                                excludeChunks?: string[];
                                • List all entries which should not be injected

                                property favicon

                                favicon?: false | string;
                                • Path to the favicon icon

                                property filename

                                filename?: string | ((entryName: string) => string);
                                • The file to write the HTML to. Supports subdirectories eg: assets/admin.html [name] will be replaced by the entry name Supports a function to generate the name

                                  'index.html'

                                property hash

                                hash?: boolean;
                                • If true then append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting

                                property inject

                                inject?:
                                | false // Don't inject scripts
                                | true // Inject scripts into body
                                | 'body' // Inject scripts into body
                                | 'head';
                                • Inject all assets into the given template or templateContent.

                                property meta

                                meta?:
                                | false // Disable injection
                                | {
                                [name: string]:
                                | string
                                | false // name content pair e.g. {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`
                                | { [attributeName: string]: string | boolean }; // custom properties e.g. { name:"viewport" content:"width=500, initial-scale=1" }
                                };
                                • Inject meta tags

                                property minify

                                minify?: 'auto' | boolean | MinifyOptions;

                                property publicPath

                                publicPath?: string | 'auto';
                                • By default the public path is set to auto - that way the html-webpack-plugin will try to set the publicPath according to the current filename and the webpack publicPath setting

                                property scriptLoading

                                scriptLoading?: 'blocking' | 'defer' | 'module' | 'systemjs-module';
                                • Set up script loading blocking will result in defer will result in <script defer src="...">

                                  'defer'

                                property showErrors

                                showErrors?: boolean;
                                • Render errors into the HTML page

                                property template

                                template?: string;
                                • The webpack require path to the template.

                                  See Also

                                  • https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

                                property templateContent

                                templateContent?:
                                | false // Use the template option instead to load a file
                                | string
                                | ((templateParameters: {
                                [option: string]: any;
                                }) => string | Promise<string>)
                                | Promise<string>;
                                • Allow to use a html string instead of reading from a file

                                property templateParameters

                                templateParameters?:
                                | false // Pass an empty object to the template function
                                | ((
                                compilation: Compilation,
                                assets: {
                                publicPath: string;
                                js: Array<string>;
                                css: Array<string>;
                                manifest?: string;
                                favicon?: string;
                                },
                                assetTags: {
                                headTags: HtmlTagObject[];
                                bodyTags: HtmlTagObject[];
                                },
                                options: ProcessedOptions
                                ) => { [option: string]: any } | Promise<{ [option: string]: any }>)
                                | { [option: string]: any };
                                • Allows to overwrite the parameters used in the template

                                property title

                                title?: string;
                                • The title to use for the generated HTML document

                                property xhtml

                                xhtml?: boolean;
                                • Enforce self closing tags e.g.

                                index signature

                                [option: string]: any;
                                • In addition to the options actually used by this plugin, you can use this hash to pass arbitrary data through to your template.

                                interface ProcessedOptions

                                interface ProcessedOptions extends Required<Options> {}
                                • The plugin options after adding default values

                                property filename

                                filename: string;

                                  interface TemplateParameter

                                  interface TemplateParameter {}
                                  • The values which are available during template execution

                                    Please keep in mind that the templateParameter options allows to change them

                                  property compilation

                                  compilation: Compilation;

                                    property htmlWebpackPlugin

                                    htmlWebpackPlugin: {
                                    tags: {
                                    headTags: HtmlTagObject[];
                                    bodyTags: HtmlTagObject[];
                                    };
                                    files: {
                                    publicPath: string;
                                    js: Array<string>;
                                    css: Array<string>;
                                    manifest?: string;
                                    favicon?: string;
                                    };
                                    options: Options;
                                    };

                                      property webpackConfig

                                      webpackConfig: any;

                                        Type Aliases

                                        type MinifyOptions

                                        type MinifyOptions = HtmlMinifierOptions;

                                          Package Files (1)

                                          Dependencies (5)

                                          Dev Dependencies (26)

                                          Peer Dependencies (2)

                                          Badge

                                          To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                          You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/html-webpack-plugin.

                                          • Markdown
                                            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/html-webpack-plugin)
                                          • HTML
                                            <a href="https://www.jsdocs.io/package/html-webpack-plugin"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>