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提供一个载体 ...
随机推荐
- (Review cs231n) Gradient Calculation and Backward
---恢复内容开始--- 昨日之补充web. 求解下图的梯度的流动,反向更新参数的过程,表示为 输入与损失梯度的关系,借助链式法则,当前输入与损失之间的梯度关系为局部梯度乘以后一层的梯度. ---恢复 ...
- html5的理解
1.良好的移动性,以移动设备为主 2.响应式设计,以适应自动变化的屏幕尺寸 3.支持离线缓存技术,webStorage本地缓存 4.新增canvas.video.audio等新标签元素,新增特殊内容元 ...
- IntelliJ IDEA的使用之调试方法
不管学什么要及时复习和练习!!不然就会忘掉,有个输入输出的过程 IntelJ IDEA的使用之断点调试 1)添加断点:直接在代码的最左侧点一下就行,出现红色圈圈. 2)单步运行:mac中F7.F8有其 ...
- flask模板，路由,消息提示，异常处理
1.flask的路由与反向路由 from flask import Flask, request, url_for app = Flask(__name__) @app.route('/') def ...
- tcp编程 示例
#include <stdio.h> #include <sys/types.h> #include <sys/socket.h> #include <net ...
- suse日常操作(含suse/rhel内核与发行版对应关系)
最近有家客户要求只能使用suse系统,是suse 12 sp3的,而且版本都不同意换,一直以来,都是使用rhel的客户,还没遇到过suse的,可偏偏不巧,我们的系统和suse 12 sp3自带的gli ...
- 微信小程序 windos server 2008 iis 7 tls1.0 升级 tls1.2
执行下面注册表:重启服务器 下载:tls 1.2.reg 1.代码如下 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\ ...
- Spring是如何处理注解的
如果你看到了注解,那么一定有什么代码在什么地方处理了它. Alan Hohn 我教Java课程时强调的一点是注解是惰性的.换句话说,它们只是标记,可能具有某些属性,但没有自己的行为.因此,每当你在一段 ...
- 配置maven默认jdk版本
1.在setting.xml中配置.对所有通过该配置文件构建的maven项目有效. <profile> <id>jdk-1.8</id> <activatio ...
- Python3基础 dict in/not in 查询一个字符是否指定字典的键或者值
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...