• Version 5.6.0
  • Published
  • 120 kB
  • 5 dependencies
  • MIT license


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


Simplifies creation of HTML files to serve your webpack bundles



class HtmlWebpackPlugin

class HtmlWebpackPlugin {}


    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 getHooks

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


              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


                            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

                              | '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


                              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

                              | 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

                              | 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="...">


                              property showErrors

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

                              property template

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

                                See Also


                              property 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

                              | 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 (19)

                                        Peer Dependencies (2)


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

                                        You may also use to create a custom badge linking to

                                        • Markdown
                                        • HTML
                                          <a href=""><img src="" alt=""></a>