作用

简化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. SQL优化(转)

    1. 负向条件查询不能使用索引 select * from order where status!=0 and stauts!=1 not in/not exists都不是好习惯 可以优化为in查询: ...

  2. selenium-java web自动化测试工具抓取百度搜索结果实例

    selenium-java web自动化测试工具抓取百度搜索结果实例 这种方式抓百度的搜索关键字结果非常容易抓长尾关键词,根据热门关键词去抓更多内容可以用抓google,百度的这种内容容易给屏蔽,用这 ...

  3. Ubuntu 为 root 帐号开启 SSH 登录

    1. 修改 root 密码sudo passwd root 2. 以其他账户登录,通过 sudo nano 修改 /etc/ssh/sshd_config :xxx@ubuntu:~$ su - ro ...

  4. 数据库 SQL 优化大总结之：百万级数据库优化方案

    网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 这篇文章我花费了大量的时间查找资料.修改.排版,希望大家阅读之后,感觉 ...

  5. USB基础知识概论（版本：v0.9.2）

    源: USB基础知识概论

  6. Linux环境jdk的安装

    1.下载jdk1.7,oracle的下载地址已经失效,找了个其他的地址进行下载. wget http://pc.xzstatic.com/2017/03/jdk7u79linuxx64.tar.gz ...

  7. PyQt5-多窗口数据传输

    #窗口之间数据传递(通过属性方式) from PyQt5.QtWidgets import QDialogButtonBox, QDateTimeEdit,QDialog,QComboBox,QTab ...

  8. jquery .width和css("width", )区别

    1.$.fn.width会根据是否是borderBox来计算新的宽度,如果是borderBox,会额外加上padding和border的宽度,计算时只是按照px来,用rem做单位会出错: 2.$.fn ...

  9. linux homebrew skill 技巧

    $ cat /usr/bin/gitdiffH0#!/bin/bashgit diff HEAD $(git ls-files| grep '\.py$\|\.py\.in$') | osflake8 ...

  10. Selenium Java Selection的使用

    用于向具有drop-down的选择框中输入内容 new Select(new ChromeDriver().findElement(By.cssSelector(" ..."))) ...