开发者学堂课程【前端自动化构建工具 Webpack：html-webpack-plugin 的两个基本作用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8215
html-webpack-plugin 的两个基本作用
一、html-webpack-plugin 的作用
1.先安装在内存中生成 html 插件
把页面放在内存里需要借助一个插件
点击下面的终端
webpack：Compiled successfully.
终止此处理操作吗（Y/N）?Y
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> cnpm i html-webpack-plugin -D
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study>
2. 使用 html-webpack-plugin 插件配置启动页面：
由于使用 --contentBase 指令的过程比较繁琐 需要指定启动的目录，同时还需要修改 index.html 中 script 标签的 src 属性，所以推荐大家使用 html-webpack-plugin 插件配置启动页面。
l 运行 cnpm i html-webpack-plugin --save-dev 安装到开发依赖
l 修改 webpack.config.js 配置文件如下
//导入处理路径的模快
var path - require('path');
//导入自动生成html文件的插件
var htmlwebpackPlugin=require（html-webpack-plugin');
module.exports={
entry：path.resolye(_dirname ,'src/js/main.js'），//项目入口文件
output：{// 配置输出选顶
path:path.resolve(_dirname,'dist')，// 配置输出的路径
filename:'bundle.js'//配置输出的文件名
plugins:[//添加plugins节点配置插件
new htmlwebpackPlugin({
template:path.resolve(_dirname 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
})
]
}
3.找到 webpack.config.js 文件
//导入在内存中生成HTML页面的插件
//只要是插件，都一定要放到plugin节点中去
const htmlWebpackPlugin=require(＇html-webpack-plugin＇)
plugins:[
new htmlWebpackPlugin({
//创建一个在内存中生成HTML页面的插件template:path.join(_dirname,＇./src/index.html＇),
//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
filename：＇index123.html＇ //指定生成的页面的名称
})
]
当使用 html-webpack-plugin 之后，我们不再需要手动处理 bundle.js 的引用路径，因为这个插件，已经帮我们自动创建了一个合适的 script，并且引用了正确的路径
4.html-webpack-plugin 插件的两个作用：
l 自动在内存中根据指定页面生成一个内存的页面
l 自动把打包好的 bundle.js 追加到页面中去
