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