1、安装预览插件
npm i html-webpack-plugin -D
2、webpack.config.js下配置
//导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
//指定要用到的模板
template:'./src/index.html',
//指定生成的文件的名称,文件存在内存中,在目录中不显示
filename:'index.html'
})
module.exports = {
//plugins是个数组,是webpack打包期间会用到的一些插件列表
plugins:[htmlPlugin]
}
3、package.json下配置
// --open 打包完成后自动打开浏览器页面
// --host 配置Ip地址
// --port 配置端口
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080"
},