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提供一个载体 ...
随机推荐
- 区块链公链分片技术(sharding)方案，配思维导图
区块链公链分片技术(sharding)方案,配思维导图 分片技术(sharding)方案 以太坊分片思路 其基本思想是,将网络中的节点分成不同的碎片,各分片可以并行处理不同交易,这样可以并行处理相互之 ...
- eclipse 出现内存溢出问题解决办法
1.eclipse.ini添加设置: -vm#eclipse启动使用的jdk设置,路径根据自己实际路径修改 C:/Program Files/Java/jdk1.6.0_45/bin/javaw.ex ...
- Java连接数据库 #01# JDBC单线程适用
官方教程(包括 javase的基础部分):JDBC Basics 重新梳理.学习一下“Java连接数据库”相关的内容. 因为最开始没有认真学多线程和JDBC,一直在自己写的多线程程序中维持下面的错误写 ...
- django 正向,反向
表名 ,foreignkey, 正向 obj.表名小写_set.all() 反向操作.
- Docker学习笔记之浅谈虚拟化和容器技术
0x00 概述 相信所有对 Docker 有所耳闻的朋友都知道,它是一款以容器虚拟化技术为基础的软件,因此在了解有关 Docker 的概念知识和使用方法之前,虚拟化和容器技术是我们不可或缺的基础知识. ...
- RadioButton在数据列表中实现单选功能
在服务器端动态生成的name总是不断变化,故需手动实现单选 ; <html xmlns="http://www.w3.org/1999/xhtml"> <head ...
- phpstudy手动把mysql数据库从5.5.56升级到5.6.41
查看mysql版本: mysql> select version(); 1.关闭mysql,把原来的D:/phpStudy/PHPTutorial/mysql改名为MySQL_5.5.53作为备 ...
- 牛客网校招全国统一模拟笔试（二月场）- Java方向
1.请问下面关于与wait()一起使用的方法notify()的各种陈述,哪个正确? A 多个线程同时等待某个条件,则只有等待时间最长的哪个线程被通知 B 多个线程同时等待某条件,则没有办法预测哪个线程 ...
- Bootstrap3基础 container 浏览器宽度与容器宽度的四种配合
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- .NET BackgroundWorker的一般使用方式
代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...