作用

简化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. 转：三值逻辑与NULL的处理方式

    来自:<Microsoft SQL SERVER 2008技术内幕 T-SQL查询>P7 在SQL中谓词(逻辑表达式)的可能值为TRUE.FALSE和UNKNOWN.这就是所谓的三值逻辑, ...

  2. tomcat tomcat-user.xml被还原

    问题:把tomcat——conf中的tomcat-user.xml中的角色.密码修改之后,在eclipse重启Tomcat,设置的Tomcat用户名和密码失效. 解决问题:同时修改tomcat——co ...

  3. JDBC-day02

    JDBC:数据库连接  java  database connectivity ###properties 属性对象,用于读取*.properties属性配置文件中的数据 -为什么使用:之前写法是把数 ...

  4. [转载]C#中IndexOf的使用

    注:此方法无法找出目标字符串第二次.第三次等出现的位置. 具体代码如下所示: 1 2 3 4 5 var array=['REG','2018','2018'];   array.indexOf(‘R ...

  5. How to use Nissan consult 3 plus to check, make key and program?

    How to use Nissan consult 3 plus to test Nissan? Firstly: get one particular Nissan consult 3 plus. ...

  6. python之字符串函数

    1.  endswith()  startswith() # 以什么什么结尾 # 以什么什么开始 test = "alex" v = test.endswith('ex') v = ...

  7. 巧用ELK快速实现网站流量监控可视化

    前言 本文可能不会详细记录每一步实现的过程,但一定程度上可以引领小伙伴走向更开阔的视野,串联每个环节,呈现予你不一样的效果. 业务规模 8个平台 100+台服务器 10+个集群分组 微服务600+ 用 ...

  8. linux下nginx整合php

    在nginx中药使用php可不像apache那样,因为apache是把php当做自己的一个模块来启动的, 而我们的nginx是把http请求转发给php程序,也就是说,php和nginx是相互独立的的 ...

  9. Python - mouse clicks and keystrokes on a background window

    https://stackoverflow.com/questions/43965437/python-mouse-clicks-and-keystrokes-on-a-background-wind ...

  10. git clone 报错Unable to negotiate with xxx.xxx.xxx.xxx port 12345: no matching key exchange method found. Their offer: diffie-hellman-group1-sha1

    在执行git clone命令报错 Unable to negotiate with xxx.xxx.xxx.xxx port 12345: no matching key exchange metho ...