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提供一个载体 ...
随机推荐
- 区块链3.0 ada Cardano卡尔达诺如何获得一致好评？
区块链3.0 ada Cardano卡尔达诺如何获得一致好评? EOS 的直接竞争对手是以太坊.文章介绍的卡尔达诺(Cardano)的目标就更加远大了,他要同时锁定比特币和以太坊.但大家去网上搜索卡尔 ...
- Spring cloud开发内存占用过高解决方法
https://blog.csdn.net/wanhuiguizong/article/details/79289986 版权声明:本文为博主原创文章,转载请声明文章来源和原文链接. https:// ...
- vue 组件之间 的通信
组件之间通信: 同级组件之间通信:两个组件定义应用到同一个vue实例之下: <div id="webapp" class="box"> & ...
- oracle goldengate 远程捕获和投递
很早之前,OGG只支持部署在数据库主机上,这叫本地化部署.而现在OGG支持远端部署,即OGG软件不安装在数据库主机上,而是安装在单独的机器上,负责数据抽取和投递. 这样做的好处: l 易于管理 - 在 ...
- hibernate文档头的不同版本
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "h ...
- Android Camera2 参数调节关键字翻译集合，常用关键字解析
https://blog.csdn.net/qq_29333911/article/details/79400617 black_level_lock黑电平补偿是否锁定当前值,或者可以自由更改.col ...
- 使用URLConnection进行访问
package test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOExcepti ...
- svn钩子
#!/bin/sh #修改为服务编码 export.UTF-8 #Set variable REPOS="$1" REV="$2" #svn安装脚本目录 SVN ...
- scrapy 下载图片 from cuiqingcai
import scrapy class MzituScrapyItem(scrapy.Item): # define the fields for your item here like: # nam ...
- 基于rsync的lsyncd自动同步配置
环境部署 源机:192.168.31.140 目标机:192.168.31.130 源机配置 基于rsync的lsyncd 自动同步,rsync的配置省略 安装lsyncd rpm -ivh lsyn ...