目录结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="title"></div>
</body>
</html>webpack.config.js
安装依赖
html-webpack-plugin
配置说明
- minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
- hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
- template：是要打包的html模版路径和文件名称。
const htmlPlugin= require('html-webpack-plugin');
...
plugins: [
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
],运行webpack,打包
- 打包后的index.html没有双引号
- 修改entry.js之后，重新打包，会生成新的hash
<script type=text/javascript src=entry.js?6cb4a52405b85b584b50></script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。