Home > Developer > Web Develop
Plugin Address: Https://www.npmjs.com/package/html-webpack-plugin
This plugin is used to simplify the creation of HTML files that serve the Webpack bundle, especially if a hash value is included in the file name, and this value changes every time the compilation occurs. You can either let the plugin help you generate HTML files automatically, or you can use the Lodash template to load the generated bundles, or load the bundles yourself.
InstallationInstall this plugin using NPM
Basic Usage$ NPM Install [email protected]--save-dev
This plugin can help generate HTML files, in the BODY element, using script to contain all your webpack bundles, just configure it in your Webpack configuration file as follows:
var htmlwebpackplugin = require (' Html-webpack-plugin ') var webpackconfig = { entry: ' index.js ', output: { Path: ' Dist ', filename: ' Index_bundle.js ' }, plugins: [New Htmlwebpackplugin ()]}This will automatically generate a file named index.html in the Dist directory with the following contents:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>Webpack App</title> </Head> <Body> <Scriptsrc= "Index_bundle.js"></Script> </Body></HTML>
If you have multiple Webpack entry points, they will be included in the generated script element.
If any of the CSS resources are included in the Webpack output (for example, using Extracttextplugin to refine the CSS), these will be included in the head element of the HTML page with link.
ConfigurationA series of configurations can be made to support the following configuration information
The following example shows how to use these configurations.
{ entry: ' index.js ', output: { path: ' Dist ', filename: ' index_bundle.js ', hash:true }, plugins: [ new Htmlwebpackplugin ({ title: ' My App ', filename: ' assets/admin.html ' }) ]}Multiple HTML files are generated by adding the plugin multiple times in the configuration file.
{ entry: ' index.js ', output: { path: ' Dist ', filename: ' Index_bundle.js ' }, plugins: [ New Htmlwebpackplugin (),//generates default index.html new Htmlwebpackplugin ({ //Also Generate a test.html filename: ' test.html ', Template: ' src/assets/test.html ' } ]}If the default generated HTML files are not appropriate for your needs, you can create your own defined templates. The convenient way is through the inject option, which is then passed to the custom HTML file. Html-webpack-plugin will automatically inject all required CSS, JS, manifest and favicon files into the tag.
Plugins: [ new Htmlwebpackplugin ({ title: ' Custom template ', Template: ' my-index.html ',//Load a custom Template inject: ' body '//inject all scripts into the body }]my-index.html file
<!DOCTYPE HTML><HTML> <Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title><%=HtmlWebpackPlugin.options.title%></title> </Head> <Body> </Body></HTML>
If you have a template loader, you can use it to parse this template.
Module: { loaders: [ {test:/\.hbs$/, Loader: ' Handlebars '} ]},plugins: [ new Htmlwebpackplugin ({ title: ' Custom template using handlebars ', Template: ' My-index.hbs ', inject: ' Body ' }]Also, if your pattern is a string, you can pass it by using TemplateContent.
Plugins: [ new Htmlwebpackplugin ({ inject:true, templatecontent:templatecontentstring })]If the inject feature does not suit your needs, you want full control over resource placement. You can use the Lodash syntax directly to create your own template using the default template as a starting point.
The TemplateContent option can also be a function to use other languages, such as Jade:
Plugins: [ new Htmlwebpackplugin ({ templatecontent:function (templateparams, compilation) { //Return Your template content synchronously here return '. '; } })]or asynchronous version
Plugins: [ new Htmlwebpackplugin ({ templatecontent:function (templateparams, compilation, callback) { //Return Your template content asynchronously here callback (null, ' ... '); } )]Note that if you use both template and TemplateContent, the plugin throws an error.
The variable o in the template is the data passed in at render time, and this variable has the following properties:
"Htmlwebpackplugin": {" files": { "css": ["Main.css"], "JS": ["Assets/head_bundle.js", "Assets/main_ Bundle.js "], " chunks ": {" Head ": { " entry ":" Assets/head_bundle.js ", " CSS ": [" Main.css "] }, "main": { "entry": "Assets/main_bundle.js", "CSS": [] }, }}}If you configure Publicpath in the Webpack configuration file, the correct resources will be reflected
You can use chunks to qualify a specific block.
Plugins: [ new Htmlwebpackplugin ({ chunks: [' app '] })]You can also use Excludechunks to exclude specific blocks.
Plugins: [ new Htmlwebpackplugin ({ excludechunks: [' Dev-helper '] })]Allow other plugins to extend HTML through events.
html-webpack-plugin-before-html-processinghtml-webpack-plugin-after-html-processinghtml-webpack-plugin-after-emitHow to use:
Compilation.plugin (' html-webpack-plugin-before-html-processing ', function (Htmlplugindata, callback) { htmlplugindata.html + = ' The Magic footer '; Callback ();});
Webpack plugin: Use of Html-webpack-plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
