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

qq_39305143

于 2020-03-30 14:33:54 发布

阅读量411

点赞数

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/qq_39305143/article/details/105198792

版权

webpack 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何使用html-webpack-plugin插件为webpack项目生成预览页面，并配置自动打开浏览器功能，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"
	
}