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
Interfaces
Type Aliases
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 uniquewebpack
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
ortemplateContent
.
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;
HTML Minification options accepts the following values: - Set to
false
to disable minification - Set to'auto'
to enable minification only for production mode - Set to custom minification according to https://github.com/kangax/html-minifier#options-quick-reference
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)
- @commitlint/cli
- @commitlint/config-conventional
- @types/node
- cross-env
- cspell
- css-loader
- cz-conventional-changelog
- dir-compare
- eslint
- html-loader
- husky
- jest
- lint-staged
- mini-css-extract-plugin
- npm-run-all
- prettier
- pug
- pug-loader
- raw-loader
- rimraf
- standard-version
- style-loader
- typescript
- webpack
- webpack-cli
- webpack-recompilation-simulator
Peer Dependencies (2)
Badge
To add a badge like this oneto 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>
- Updated .
Package analyzed in 2001 ms. - Missing or incorrect documentation? Open an issue for this package.