前言：html-webpack-plugin的作用主要是用来自动生成 index.html 使用的，一般来配合 extract-text-webpack-plugin 和开发时请求文件名相同，浏览器缓存导致页面不加载情况，这时如果采用 output 模板字符串 输出时，html-webpack-plugin 能够替代手动来自动引包。
文件目录结构：
┣✈ node_modules
┣✈ webpack.config.js
┣✈ package.json
┗✈ src
┣✈ main.js
一个新文件夹：创建依赖文件（注意 window7 项目本地如果不安装webpack可能报错）
C:\Users\Administrator\Desktop\study>npm init -y
Wrote to C:\Users\Administrator\Desktop\study\package.json:
{
"name": "study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
修改 scripts 字段，增加一个脚本。
"scripts": {
"dist": "webpack"
}
安装：html-webpack-plugin
C:\Users\Administrator\Desktop\study>npm install --save html-webpack-plugin
[..................] - fetchMetadata: sill resolveWithNewModule html-webpack-pl
配置 webpack.config.js 文件(HtmlWebpackPlugin 配置项什么也不写)：
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
mode:"development",
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({})
]
}
打包后：dist 文件里面的内容
bundle.js
index.html
其中index.html的内容为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
不配置任何选项的html-webpack-plugin插件，他会默认将webpack中的output配置都插入到文件指定的位置。
常用 html-webpack-plugin配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
mode:"development",
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
title: 'Webpack App',
favicon: 'favicon.ico',
template: path.resolve(__dirname,'./src/template.html'),
inject: 'head',
minify: {
removeAttributeQuotes: true, // 移除属性的引号（不常用）
removeEmptyElements:true, //删除所有含有空内容的元素。（不常用）
removeComments: true, //带HTML注释
collapseWhitespace: true, //去掉空格
minifyJS: true, // 压缩html里的js（使用uglify-js进行的压缩）
minifyCSS: true, // 压缩html里的css（使用clean-css进行的压缩）
}
})
]
}
-
title:生成的html文档的标题。如果你设置的 title 和template模板中发生了冲突，以template为准。 -
template:指定你生成的文件所依赖哪一个html文件模板。 -
filename就是html文件的文件名，默认是index.html。 -
inject：
inject有四个值： true body head false
true 默认值，script 标签位于html文件的 body 底部
body script标签位于html文件的 body 底部
head script标签位于html文件的 head中
false 不插入生成的js文件，这个几乎不会用到的
-
favicon给你生成的html文件生成一个favicon，值是一个路径。文件和webpack.config.js同级。 - minify
使用minify会对生成的html文件进行压缩。默认是false。html-webpack-plugin内部集成了html-minifier。 -
cache默认是true的，表示内容变化的时候生成一个新的文件。 - hash：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
生成的 index.html 文件。
<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>冲突时，以我template为准</title><style>div{width:100px;height:100px;background-color:#345534}</style><link rel="shortcut icon" href=favicon.ico><script type=text/javascript src=bundle.js></script></head><body><script>console.log(8888),console.log(8888),console.log(8888),console.log(8888)</script></body></html>
- chunks
chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件
entry: {
index: path.resolve(__dirname, './src/index.js'),
devor: path.resolve(__dirname, './src/devor.js'),
main: path.resolve(__dirname, './src/main.js')
}
plugins: [
new httpWebpackPlugin({
chunks: ['index','main']
})
]
那么编译后：
<script type=text/javascript src="index.js"></script>
<script type=text/javascript src="main.js"></script>
而如果没有指定 chunks 选项，默认会全部引用。
网友评论