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提供一个载体 ...
随机推荐
- 转：wcf大文件传输解决之道（1）
首先声明,文章思路源于MSDN中徐长龙老师的课程整理,加上自己的一些心得体会,先总结如下: 在应对与大文件传输的情况下,因为wcf默认采用的是缓存加载对象,也就是说将文件包一次性接受至缓存中,然后生成 ...
- 区块链公链分片技术(sharding)方案，配思维导图
区块链公链分片技术(sharding)方案,配思维导图 分片技术(sharding)方案 以太坊分片思路 其基本思想是,将网络中的节点分成不同的碎片,各分片可以并行处理不同交易,这样可以并行处理相互之 ...
- Python这么热，要不要追赶Python学习热潮？
Python这么热,要不要追赶Python学习热潮? Python 可以用来做什么?在我看来,基本上可以不负责任地认为,Python 可以做任何事情.无论是从入门级选手到专业级选手都在做的爬虫,还是W ...
- 3、CentOS 6.5系统安装配置Tomcat 8详细过程
安装环境:CentOS-6.5 安装方式:源码安装 软件:apache-tomcat-8.0.0.RC3.tar.gz 安装前提 安装tomcat 将apache-tomcat-8.0.0.RC3.t ...
- ManyToManyField 增加记录
class BOMView(View): def get(self,request): obj=BOMForm() return render(request,'bom.html',{'obj':ob ...
- Docker学习笔记之docker volume 容器卷的那些事（二）
预览目录 更改目录拥有者 Data Container 切换用户 参考文章 0x00 概述 如果你读了docker volume 容器卷的那些事(一),我想应该不会遇到下面这些问题的,毕竟是具有指导意 ...
- maven单元测试报java.lang.IllegalStateException: Failed to load ApplicationContext
报这个异常java.lang.IllegalStateException: Failed to load ApplicationContext的时候,通常是因为applicationContent.x ...
- ReentrantLock$Sync.tryRelease java.lang.IllegalMonitorStateException
早上一来,例行性的看主要环境的运行情况,发现有个环境中有如下异常: 17-02-28 08:13:37.368 ERROR pool-2-thread-65 com.ld.net.spider.Spi ...
- 谈论linux同组多用户操作问题
同组多用户,最先起到什么作用这个我也是不明白的, 然后乱搞了一堆, 下面我做个笔记帮组日后分析. 一个用户组承载多个用户, 像这样 这是我原先的思路.然后就是chenglee用户和chenglee12 ...
- Android之udp传输
注意除了添加Internet权限外,还要添加两行代码 StrictMode.setThreadPolicy(new StrictMode.ThreadPolicy.Builder().detectDi ...