search

Home >Web Front-end >JS Tutorial >Detailed explanation of using webpack plug-in html-webpack-plugin example

Detailed explanation of using webpack plug-in html-webpack-plugin example

php中世界最好的语言
php中世界最好的语言Original
2018-05-25 15:22:571910browse

This time I will bring you a detailed example of using the webpack plug-in html-webpack-plugin. What are the precautions for using the webpack plug-in html-webpack-plugin? Here are the actual cases, let's take a look.

This plugin is used to simplify the creation of HTML files that serve webpack bundles, especially when the file name contains a hash value, and this value changes every time it is compiled. You can either let this plugin help you automatically generate HTML files, use lodash templates to load the generated bundles, or load the bundles yourself.

Installation

Use npm to install this plugin

$ npm install html-webpack-plugin@2 --save-dev

Basic Usage

This plugin can help generate HTML file, in the body element, use script to include all your webpack bundles, just configure the following in your webpack config file: 

var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
 entry: 'index.js',
 output: {
  path: 'dist',
  filename: 'index_bundle.js'
 },
 plugins: [new HtmlWebpackPlugin()]
}

This will automatically be in the dist directory Generate a file named index.html with the following content: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
 </head>
 <body>
  <script src="index_bundle.js"></script> 
 </body>
</html>

If you have multiple webpack entry points, they will all be included in the generated script element.

If there are any CSS resources included in the webpack output (for example, css extracted using ExtractTextPlugin), these will be included in the head element of the HTML page using links.

Configuration

A series of configurations can be performed, supporting the following configuration information

  1. title: used to generate pages title element

  2. filename: The name of the output HTML file. The default is index.html. It can also be directly configured with a subdirectory.

  3. template: Template file path, supports loader, such as html!./index.html

  4. inject: true | 'head' | 'body' | false , inject all resources into a specific template or templateContent. If set to true or body, all javascript resources will be placed at the bottom of the body element, and 'head' will be placed at the bottom of the body element. in the head element.

  5. favicon: Add specific favicon path to the output HTML file.

  6. minify: {} | false, pass html-minifier option to minify output

  7. hash: true | false, if true, will Adds a unique webpack build hash to all included scripts and CSS files, useful for uncaching.

  8. cache: true | false, if true, this is the default value and the file will only be published after the file is modified.

  9. showErrors: true | false, if true, this is the default value, error information will be written to the HTML page

  10. chunks: Allows adding only certain chunks (for example, only unit test chunks)

  11. chunksSortMode: Allows to control how chunks are sorted before being added to the page. Supported values: 'none' | 'default' | {function}-default:'auto'

  12. excludeChunks: Allows skipping certain chunks, (for example, skipping unit testsblock)

The following example demonstrates 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'
  })
 ]
}

Generate multiple HTML files

Generate multiple HTML files by adding this plug-in 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'
  })
 ]
}

Write a custom template

If the default generated HTML file does not suit your needs, you can create your own custom template. A convenient way is to pass the inject option and then pass it to a custom HTML file. html-webpack-plugin will automatically inject all required CSS, js, manifest and favicon files into the markup. 

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>
  <meta http-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 using templateContent. 

plugins: [
 new HtmlWebpackPlugin({
  inject: true,
  templateContent: templateContentString
 })
]

如果 inject 特性不适合你的需要，你希望完全控制资源放置。 可以直接使用 lodash 语法，使用  default template 作为起点创建自己的模板。

templateContent 选项也可以是一个函数，以便使用其它语言，比如 jade：

plugins: [
 new HtmlWebpackPlugin({
  templateContent: function(templateParams, compilation) {
   // Return your template content synchronously here 
   return '..';
  }
 })
]

或者异步版本

plugins: [
 new HtmlWebpackPlugin({
  templateContent: function(templateParams, compilation, callback) {
   // Return your template content asynchronously here 
   callback(null, '..');
  }
 })
]

注意，如果同时使用 template 和 templateContent ，插件会抛出错误。

变量 o 在模板中是在渲染时传递进来的数据，这个变量有如下的属性：

1、htmlWebpackPlugin: 这个插件的相关数据 ◦

htmlWebpackPlugin.files: 资源的块名，来自 webpack 的 stats 对象，包含来自 entry 的从 entry point name 到 bundle 文件名映射。

"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": []
   },
  }
 }
}

如果在 webpack 配置文件中，你配置了 publicPath，将会反射正确的资源

htmlWebpackPlugin.options: 传递给插件的配置。

2、webpack: webpack 的 stats 对象。

3、webpackConfig: webpack 配置信息。

过滤块

可以使用 chunks 来限定特定的块。

plugins: [
 new HtmlWebpackPlugin({
  chunks: ['app']
 })
]

还可以使用 excludeChunks 来排除特定块。

plugins: [
 new HtmlWebpackPlugin({
  excludeChunks: ['dev-helper']
 })
]

事件

通过事件允许其它插件来扩展 HTML。

  1. html-webpack-plugin-before-html-processing

  2. html-webpack-plugin-after-html-processing

  3. html-webpack-plugin-after-emit

使用方式：

compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
 htmlPluginData.html += 'The magic footer';
 callback();
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样搭建vue2.0+boostrap项目

Angular入口组件与声明式组件案例对比

The above is the detailed content of Detailed explanation of using webpack plug-in html-webpack-plugin example. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of automatic refresh and parsing steps using webpackNext article：Detailed explanation of automatic refresh and parsing steps using webpack

Related articles

See more