作用

简化Html文件的创建，以便为你的webpack bundle包提供服务。这对于在文件名中包含每次会随着编译而发生变化的hash的webpack bundle尤其有用。插件可以生成一个HTML文件。

安装

安装在开发环境，生产环境不需要安装

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

如何在webpack.config.js中配置

1. 无参配置

var HtmlWebpackPlugin = require('html-webpack-plugin');

var path = require('path');

module.exports = {

  entry: 'index.js',

  output: {

    path: path.resolve(__dirname, './dist'),

    filename: 'bundle.js'

  },

  plugins: [new HtmlWebpackPlugin()]

};

结果：这将会产生一个包含以下内容的dist/index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>webpack App</title>

  </head>

  <body>

    <script src="bundle.js"></script>

  </body>

</html>

结论一：插件生成的文件默认名称为index.html

结论二：插件生成的路径为output中指定的path路径

结论三：生成的html文件中会自动引用output目录下的bundle文件

2.template参数

首先在项目根路径下增加index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Caching</title>

  </head>

  <body>

  <div id=app></div>

 </body>

</html>

配置

var HtmlWebpackPlugin = require('html-webpack-plugin');

var path = require('path');

module.exports = {

  entry: 'index.js',

  output: {

    path: path.resolve(__dirname, './dist'),

    filename: 'bundle.js'

  },

    plugins: [

        new HtmlWebpackPlugin({

            template: 'index.html',

        }),

    ],

};

生成dist/index.html内容如下：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Caching</title>

  </head>

  <body>

  <div id=app></div>

 <script type="text/javascript" src="bundle.js"></script></body>

</html>

结论四：可以通过template配置生成的html模板

官方文档

webpack插件配置（二）- HtmlWebpackPlugin的更多相关文章

  1. webpack学习笔记 (二) html-webpack-plugin使用

    这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个ht ...

  2. webpack插件解析：HtmlWebpackPlugin是干什么的以及如何使用它

    HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,H ...

  3. webpack插件配置（一） webpack-dev-server 路径配置

    本文的路径配置主要涉及到webpack.config.js文件中devServer与output两个选项的配置 webpack-dev-server定义 webpack-dev-server主要是启动 ...

  4. jenkins系列之插件配置(二)

    第一步:下面来安装nodejs插件 第二步:可以看到,Jenkins提供了丰富的插件供开发者使用,找到需要的[NodeJS Plugin],勾选后点击安装即可 我的是已经安装了 第三步: 安装完毕后, ...

  5. webpack 插件： html-webpack-plugin

    插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...

  6. webpack快速入门——插件配置：HTML文件的发布

    1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...

  7. webpack插件之htmlWebpackPlugin

    webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin  由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...

  8. 使用`html-webpack-plugin`插件配置启动页面

    由于使用`--contentBase`指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐大家使用`html-webpack-plugin ...

  9. webpack插件之html-webpack-plugin

    官方文档:https://www.npmjs.com/package/html-webpack-plugin html-webpack-plugin 插件专门为由webpack打包后的js提供一个载体 ...

随机推荐

  1. SEO三种职位类型：编辑型SEO、技术型SEO、营销型SEO详解

    SEO三种职位类型:编辑型SEO.技术型SEO.营销型SEO详解 网站SEO优化作为营销端的服务之一,这些年也呈现出日新月异的格局.一改过去游兵散将式的小作坊生产模式,不断有力量强大的公司团体加入到这 ...

  2. 读QT5.7源码（三）Q_OBJECT 和QMetaObject

    Qt meta-object系统基于三个方面:  1.QObject提供一个基类,方便派生类使用meta-object系统的功能:  2.Q_OBJECT宏,在类的声明体内激活meta-object功 ...

  3. 51Nod 1212 无向图最小生成树 （路径压缩）

    N个点M条边的无向连通图,每条边有一个权值,求该图的最小生成树.   Input 第1行:2个数N,M中间用空格分隔,N为点的数量,M为边的数量.(2 <= N <= 1000, 1 &l ...

  4. JustOj 2039: 成绩排名 （结构体排序）

    题目描述 每次期末考试成绩出来之前的一段时间大豪哥心里都是痛苦的,总感觉自己会在班上排名特别差.所以当成绩出来以后大豪哥想快点知道班上的总排名,以便知道自己的排名.(PS:大豪哥班上有个学霸名叫日天, ...

  5. multer中间件

    1.Multer是node.js的一个中间件,用于处理multipart/form-data类型的表单数据,它主要用于上传文件.(Multer不会处理任何非multipart/form-data类型的 ...

  6. linux+nginx+mysql+php环境下，安装ecshop

    我们在工作过程中要经常和电商打交道,所以,学会安装ecshop是必须的. 下面我们来介绍一下ecshop的安装. nginx和php安装整合,在我前面的文章中有提到,这里就不做赘述了.mysql可以使 ...

  7. 注册登录二合一之bootstrap

    来源 https://bootsnipp.com/snippets/featured/login-and-register-tabbed-form jquery插件 需导入bootstrap插件 这个 ...

  8. v-text v-html等指令的使用

    v-text:以纯文本方式显示数据: v-html:可以识别HTML标签: v-once:只渲染元素或组件一次: v-pre:不进行编译,直接显示内容: v-cloak:可以隐藏未编译的 Mustac ...

  9. P1297 [国家集训队]单选错位（期望）

    P1297 [国家集训队]单选错位 期望入门 我们考虑涂到第$i$道题时的情况 此时题$i$答案有$a[i]$种,我们可能涂$a[i+1]$种 分类讨论: 1.$a[i]>=a[i+1]$: 可 ...

  10. SolrCloud集群配置

    前提: 1,已经做好zookeeper集群或伪集群配置. 2,已将solr部署到tomcat中 接下来,我们将zookeeper与tomcat进行关联 vim tomcat/bin/catalina. ...