webpack配置html-webpack-plugin生成预览页面

webpack配置html-webpack-plugin生成预览页面

• npm i html-webpack-plugin -D安装生成预览页面的插件
• 修改webpack.config.js文件的头部区域，添加如下配置

const HtmlWebpackPlugin = require('html-webpack-plugin);
const  htmlplugin = new HtmlWebpackPlugin ({
	//指定用到的模板文件
	template:'./src/index.html',
	//指定生成的文件名，该文件存在内存中，目录中不显示
	filename:'index.html'
})

• webpack.config.js文件中新增plugins节点

module.exports = {
	//plugins是打包期间用到的插件列表
	plugins:[htmlplugin]
}

附加：让运行npm run dev之后自动打开项目页面
package.json中做如下修改

"scripts":{
	//--open 打包后自动打开浏览器页面
	//--host 配置ip地址
	//--port 配置端口
	"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
	
}