详解html-webpack-plugin插件(用法总结)

html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件,如果直接将 html 文件置于 ./src 目录中,用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。

Webpack 插件使用三步曲:安装>引入>配置

npm 安装

npm install --save-dev html-webpack-plugin

yarn 安装

yarn add html-webpack-plugin --dev

html-webpack-plugin 入口未定义时

//webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin()
  ]
}

输出的 html 文件为:dist/index.html

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

此 webpack.config.js 配置文件,是最简用法 html-webpack-plugin 甚至未传递任何参数,但它基于这个原则 Entrypoint undefined = index.html 当未定义此插件的入口时,默认为 index.html,输出同样是 index.html。
所以未定义入口时,不论 ./src 下有任何名称的 html 文件都不会被打包处理,但是会默认输出 index.html 文件。

html-webpack-plugin 中任何自定义参数设置都会覆盖默认值

简单定义一个入口(在参数对象的 template 字段中设置)看看效果:

./src/index.html 中有这个文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="test">html webpack plugin</div>
</body>
</html>

webpack.config.js 增加 template 字段

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html'//只增加了这行
    })
  ]
}

打包结果是 dist/home.js 和 dist/index.html 其中 html 文件内容如下,和之前src文件中创建的完全一样,证明自定义入口生效,且覆盖了默认入口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="test">html webpack plugin</div>
</body>
</html>

template: './src/index2.html' 这里,template 的值就是 html 文件的入口,相当于js文件的 entry 字段的作用,只设置 template时,默认输出为 index.html, 输出文件名通过 `filename` 字段设置

template指定你生成的文件所依赖哪一个html文件模板,模板类型可以是html、jade、ejs等。但是要注意的是,如果想使用自定义的模板文件的时候,你需要安装对应的loader。

当配置了 html 文件的出口 filename 时

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index2.html',
      filename: 'index.output.html'
    })
  ]
}

输出为 dist/home.js 和 dist/index.output.html

同 webpack.config.js 配置文件的 output 属性的 filename 字段一样,htmlWebpackPlugin({})的filname 字段也可以在其值加文件夹实现分类

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index2.html',
      filename: './category/index.output.html'
    })
  ]
}

输出为 dist/home.js 和 dist/category/index.output.html

title 字段,只有未定义 template 模板文件的时候生效,即只在使用默认输出文件index.html 的时候,title 设置才有用,否则它的值,会被你指定的 template 文件的title所覆盖,title 默认值为 Webpack App

favicon

'./somepath/favicon.ico',它的值是你的 favicon.ico 图标的路径

inject的四个值: true body head false 指定在何处(body or head)引入 script 文件

  • true 默认值,script标签位于html文件的 body 底部
  • body script标签位于html文件的 body 底部
  • head script标签位于html文件的 head中
  • false 不插入生成的js文件,这个几乎不会用到的

其中 body 和 head 为字符串类型需要加引号,false和true为 Boolean 类型值

minify 的值是一个对象,设置压缩属性

plugins: [

new HtmlWebpackPlugin({
  ...
  minify: {
    removeAttributeQuotes: true // 移除属性的引号
  }
})
]
  • hash:布尔值,用于清除缓存
  • cache: 布尔值, 指定文件要不要缓存
  • showErrors:布尔值,将错误信息写入HTML页面
  • meta: {} 值是对象,设置元信息
meta:{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}

xhtml

一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。

chunks

chunks主要用于多入口文件,当你有多个入口文件,那就回编译后生成多个打包后的文件,那么chunks 就能选择你要使用那些js文件

entry: {
  index: path.resolve(__dirname, './src/index.js'),
  devor: path.resolve(__dirname, './src/devor.js'),
  main: path.resolve(__dirname, './src/main.js')
}

plugins: [
  new httpWebpackPlugin({
    chunks: ['index','main']
  })
]

那么编译后:

<script type=text/javascript src="index.js"></script>
<script type=text/javascript src="main.js"></script>

如果你没有设置 chunks 选项,那么默认html 文件会引入所有的 entry 里面的js文件

excludeChunks Chunks作用是一样的,值也都是数组形式,对多入口js进行选择

排除掉一些js

excludeChunks: ['devor.js']
// 等价于上面的

xhtml

一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • webpack 插件html-webpack-plugin的具体使用

    本文介绍了webpack 插件html-webpack-plugin的具体使用,分享给大家,具体如下: 插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在文件名中包含了 hash 值,而这个值在每次编译的时候都发生变化的情况.你既可以让这个插件来帮助你自动生成 HTML 文件,也可以使用 lodash 模板加载生成的 bundles,或者自己加载这

  • 详解MyBatis自定义Plugin插件

    作用 官方说明: MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用. 什么意思呢?就是你可以对执行某些方法之前进行拦截,做自己的一些操作,如: 1.记录所有执行的SQL(通过对 MyBatis org.apache.ibatis.executor.statement.StatementHandler 中的prepare 方法进行拦截) 2.修改SQL(org.apache.ibatis.executor.Executor中query方法进行拦截)等. 但拦截的方法调用有限制,My

  • 详解Oracle游标的简易用法

    下面看下Oracle游标的简易用法,具体代码如下所示: create or replace procedure NW_DelYW(iOPERATION_ID number, sUserID varchar2) is sCurDJBH yw_operation_link.djbh%type; cursor table_yw(ywid yw_operation.id%type) is select * from yw_operation_link t1 where t1.operation_id =

  • Node.js API详解之 tty功能与用法实例分析

    本文实例讲述了Node.js API详解之 tty功能与用法.分享给大家供大家参考,具体如下: tty 可以理解为终端的意思.tty 模块提供终端相关的接口,用来获取终端的行数列数等. 通过 const tty = require('tty'); 的方式引用 tty 模块 process.stdout.isTTY 说明: 此属性位于 process 模块,用来判断 Node.js 是否运行在一个 TTY 环境中 demo: console.log(process.stdout.isTTY) //

  • 详解shell 变量的高级用法示例

    变量删除和替换 案例:从头开始匹配,将符合最短的数据删除 (#) variable_1="I love you, Do you love me" echo $variable_1 variable_2=${variable_1#*ov} echo $variable_2 案例:从头开始匹配,将复合最短的数据删除(##) varible_3=${variable_1##*ov} echo $varible_3 案例:替换字符串,只替换第一次匹配成功的(/) echo $PATH var6

  • 详解C# 中Session的用法

    Session模型简介 在学习之前我们会疑惑,Session是什么呢?简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有若干个用户浏览正在运正在这台服务器上的网站.当每 个用户首次与这台WWW服务器建立连接时,他就与这个服务器建立了一个Session,同时服务器会自动为其分配一个SessionID,用以标识这个用 户的唯一身份.这个SessionID是由WWW服务器随机产生的一个由24个字符组成的字符串,我们会在下面的实验中见到它的实际样子. 这个唯一的SessionID是有

  • 详解C++中mutable的用法

    代码编译运行环境:VS2017+Win32+Debug mutalbe的中文意思是"可变的,易变的",是constant(即C++中的const)的反义词.在C++中,mutable也是为了突破const的限制而设置的,被mutable修饰的变量将永远处于可变的状态. mutable的作用有两点: (1)保持常量对象中大部分数据成员仍然是"只读"的情况下,实现对个别数据成员的修改: (2)使类的const函数可以修改对象的mutable数据成员. 使用mutable

  • 详解Docker Swarm概念与用法

    Docker Swarm是Docker公司开发的容器集群管理服务.从1.12.0版本开始,已经是Docker安装后自带的一部分(捆绑软件)了,又称为Swarm Mode,无需额外安装. 与Kubernetes相比,Docker Swarm是一个简单的软件,似乎不堪大用.但是它与docker-compose兼容的优点,可以弥补一切.对于没有集群使用经验的小白,用Docker Swarm起步,是一个很好的选择. 概念 Docker Swarm,主要包含以下概念: Swarm Node Stack S

  • 详解c# 接口IDisposable的用法

    C#的每一个类型都代表一种资源,而资源又分为两类: 托管资源  由CLR管理分配和释放的资源,即从CLR里new出来的对象. 非托管资源  不受CLR管理的对象,如Windows内核对象,或者文件.数据库连接.套接字.COM对象等. 如果类型用到了非托管资源,或者需要显式释放托管资源,那么需要让类型继承接口IDisposable.记住:如果类型需要显式释放资源,那么一定要继承IDisposable接口.如: class SampleClass:IDisposable { private IntP

  • 详解Golang中Channel的用法

    如果说goroutine是Go语言程序的并发体的话,那么channels则是它们之间的通信机制.一个channel是一个通信机制,它可以让一个goroutine通过它给另一个goroutine发送值信息. 1 创建channel 每个channel都有一个特殊的类型,也就是channels可发送数据的类型.一个可以发送int类型数据 的channel一般写为chan int.使用内置的make函数,如果第二个参数大于0,则表示创建一个带缓存的channel. ch := make(chan in

  • 详解Python的lambda函数用法

    lambda函数用法 lambda非常重要的一个定义.lambda在[运行时]才绑定,[不是]在定义的时候绑定.下面这个列子: 本意想:让X分别与0到1的数相加.x+0,x+1,x+2,x+3 实际运行结果是: 0 0 0 0 原因就是上面提到的,运行时才绑定.先运行的for循环,无法捕捉到循环. func = [lambda x: x + n for n in range(4)] # x+n,n是从0到3 For循环,x+0,x+1,x+3 for f in func: print(f(0))

随机推荐