一 概述
- html-webpack-plugin插件介绍
- html-webpack-plugin插件安装与配置
- html-webpack-plugin插件的特性
二 html-webpack-plugin插件介绍
- webpack中的HTML插件(类似于一个模板引擎插件)
- 可以通过此插件自定制Index.html页面的内容
三 html-webpack-plugin插件安装与配置
3.1 html-webpack-plugin插件安装
通过如下的命令,即可在项目中安装此插件
npm install html-webpack-plugin -D
安装完成后package.json->devDependencies下可以看到html-webpack-plugin依赖
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
3.2 html-webpack-plugin插件配置
1-导入HTML插件,得到一个构造函数
const HtmlPlugin =require('html-webpack-plugin')
2-指定源文件和生成文件的存放路径
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html', //指定源文件的存放路径
filename: './index.html', //指定生成文件的存放路径
})
3-通过plugins节点,使htmlPlugin插件生效
module.exports = {
entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), //输出文件的存放路径
filename: 'bundle.js',//输出文件的名称
},
mode: 'development', //mode 用来指定构建模式。可选值有 development 和 production
devServer:{
open:true,
host:'localhost',
port:8080,
static: {
directory: path.join(__dirname, './')
},
},
plugins:[htmlPlugin], //通过plugins节点,使htmlPlugin插件生效
}
3.3 使用html-webpack-plugin前后对比
使用前 | 使用后 |
---|---|
说明:
- 使用前,未配置html源和目的路径,打开后是根目录
- 使用后,配置了html源和目的路径,可以预览效果图
四 html-webpack-plugin插件的特性
4.1 index源码和html-webpack-plugin生成对比
index源码 | html-webpack-plugin生成 |
---|---|
4.2 解惑hmtl-webpack-plugin
- 通过HTML插件复制到项目根目录中的Index.html页面,也被放到内存中
- HTML插件在生成的index页面,自动注入了打包的bundle.js文件