webpack插件配置（二）- HtmlWebpackPlugin
作用
简化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的更多相关文章
- webpack学习笔记 (二) html-webpack-plugin使用
这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个ht ...
- webpack插件解析：HtmlWebpackPlugin是干什么的以及如何使用它
HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,H ...
- webpack插件配置（一） webpack-dev-server 路径配置
本文的路径配置主要涉及到webpack.config.js文件中devServer与output两个选项的配置 webpack-dev-server定义 webpack-dev-server主要是启动 ...
- jenkins系列之插件配置(二)
第一步:下面来安装nodejs插件 第二步:可以看到,Jenkins提供了丰富的插件供开发者使用,找到需要的[NodeJS Plugin],勾选后点击安装即可 我的是已经安装了 第三步: 安装完毕后, ...
- webpack 插件： html-webpack-plugin
插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...
- webpack快速入门——插件配置：HTML文件的发布
1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...
- webpack插件之htmlWebpackPlugin
webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin 由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...
- 使用`html-webpack-plugin`插件配置启动页面
由于使用`--contentBase`指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐大家使用`html-webpack-plugin ...
- webpack插件之html-webpack-plugin
官方文档:https://www.npmjs.com/package/html-webpack-plugin html-webpack-plugin 插件专门为由webpack打包后的js提供一个载体 ...
随机推荐
- Python+OpenCV图像处理（九）—— 模板匹配
百度百科:模板匹配是一种最原始.最基本的模式识别方法,研究某一特定对象物的图案位于图像的什么地方,进而识别对象物,这就是一个匹配问题.它是图像处理中最基本.最常用的匹配方法.模板匹配具有自身的局限性, ...
- 如何用nginx在本地把9000端口转发到80端口上
起因看到一个用java写的轻博客,于是就兴致冲冲的试用一下.由于是lnmp的环境,Nginx占用了80端口,新博客只能用其他的端口,这里选择了9000端口,本地测试没问题.总不能访问了域名然后在加上端 ...
- python之运算符与基本数据类型
1.开发工具:IDE pycharm(推荐).eclipse 2.运算符 结果是值 算数运算 a = 10 * 10 赋值运算 a = a + 1 a+=1 结果是布尔值 比较运算 a = 1 ...
- The Little Prince-11/30
The Little Prince-11/30 Today, I have a meeting in our department. I sincerely hope that all of my d ...
- The Little Prince-11/26
WRITE BEFORE THE BOOK REVIEW I have read The Little Prince for three or four times. However I still ...
- Python进阶【第十篇】模块(上)
·一.模块 模块就是一组功能的集合体,我们的程序可以导入模块来复用模块里的功能.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这 ...
- linux 安装 ImageMagick 和 imagick 扩展
使用命令安装 1.依次运行以下命令 yum install ImageMagick yum install ImageMagick-devel yum install php-pear 安装php-p ...
- Golang的值类型和引用类型的范围、存储区域、区别
常见的值类型和引用类型分别有哪些? 值类型:基本数据类型 int 系列, float 系列, bool, string .数组和结构体struct,使用这些类型的变量直接指向存在内存中的值,值类型的变 ...
- Apache正向代理和反向代理
一.正向代理 先说一正向代理(Forward Proxy),通常普通用户使用的比较多的,是正向代理.也就是在浏览器的网络连接属性框中,填写上一个代理服务器的ip和端口,即可通过代理服务器中转,去浏览网 ...
- Ubuntu mysql数据库导入sql文件
在阿里云Ubuntu系统导入sql数据库文件 首先linux 下查看mysql相关目录 root@ubuntu14:~# whereis mysql mysql: /usr/bin/mysql--- ...