webpack预览页面配置

应用场景：当我们配置了webpack自动打包工具后，通过 http://localhost:8080/ 访问到的是文件夹根目录，而没有直接打开html页面，如果要打开html页面需要在界面中点击指定的html页面才行。所以在这儿就用到webpack预览页面配置，直接把要在浏览器中访问的页面放在在根目录内存中。

在这里我使用VScode编辑器
在vscode中要停止自动打包，使用ctrl+c快捷键，选择 Y 接口停止自动打包功能

第一步：vscode终端，在项目根目录中运行 npm install 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:[htmlPlugin],// plugins 数组是webpack 打包期间会用到的一些插件列表

具体webpack.config.js配置如下：

const path  = require('path');//导入node.js中专门操作路径的模块
//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({//创建插件的实例对象template:'./src/index.html',//指定要用到的模板文件filename:'index.html'//指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})module.exports = {// entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径entry:{//打包入口文件的路径entry:path.join(__dirname,'./src/index.js')},output:{path:path.join(__dirname,'./dist'),//输出文件的存放路径filename:'button.js'//输出文件的名称},plugins:[htmlPlugin],// plugins 数组是webpack 打包期间会用到的一些插件列表mode:'development' // mode用来指定构建模式}

然后直接在浏览器中访问 http://localhost:8080/

这样就能直接访问了，而不需要在点击html文件来查看页面的预览了
注意：这儿放根目录html文件是放在内存中的，实际项目根目录不存在这个html文件

webpack预览页面配置相关推荐

配置 html-webpack-plugin 生成预览页面||配置自动打包相关的参数
配置 html-webpack-plugin 生成预览页面 ① 运行 npm install html-webpack-plugin –D 命令,安装生成预览页面的插件 ② 修改 webpack.co ...
Android相机预览页面被压缩和拉伸问题
最近公司要求在原有的项目中添加一个扫码登录的功能,在调试好相机之后,发现相机返回到Surfaceview页面上的预览图片,与我们现实中物品的比例并不相同,在一块正方形的Surfaceview中,预览界 ...
实现微信小程序预览文件，预览页面添加倒计时
项目场景: 提示:1.实现小程序预览doc.docx.xls.xlsx.ppt.pptx.pdf类型文件 2.进入页面展示文件内容.开始按钮,点击,按钮变为[(**s)]倒计时 3.倒计时结束后,此按 ...
原生JS调用打印预览页面并实现打印文件流图片（亲测有效）
在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印,那么如何才能够在打印预览页面中显示图片呢?希望看完这篇文章对您有所帮助! 1. 原生JS调用打印预览页面 2. 在打印预览页面加载图片使用 ...
微信小程序分享朋友圈预览页面资源不加载，空白页问题解决
问题描述分享到朋友圈,点击进入页面图片等等资源不加载解决方式我之前把获取数据接口写在onShow()生命周期中,发现预览页面不会触发onShow,只会触发onLoad生命周期将获取内容逻辑接口 ...
计算机电子预览室配置清单,完整的停车场管理系统设计方案-附停车场管理详细大样图及安装图!...
一套完整的停车场管理主要是由车辆出入口管理.车位管理.地下车库引导.反向寻车系统以及停车场管理平台组成. 一.系统设计系统构架二. 系统组成 1.出入口管理出入口结构 ①车辆进场流程车辆进场时 ...
pdf.js 修改预览页面title
前言当使用异步请求去加载pdf文件时,预览页的title会变成请求的地址,即使修改response的返回信息也无法奏效. 经过调试后发现,viewer.js中默认使用的请求地址作为页面title,因 ...
SAP-MM:物料采购订单的客制化开发与对应打印/预览的配置
Preface 由于之间工作的转变,从原来相对纯粹单一的SAP本地化薪酬方案的实施与维护,变成了现在企业内部新增的业务需求在SAP系统上的配置与再开发.这个转变确实有了很大的变化,也伴随着相当大的挑战 ...
vue实现后台实时编辑预览页面，小程序端展示
这个功能是在后台编辑小程序页面,然后在小程序端展示出来. 左侧预览,右侧编辑,下方点击可以添加对应组件. 图片广告(轮播图)组件: 富文本组件: 整体功能的思路是这样的: 新建与编辑是同一个页面,进入 ...

webpack预览页面配置

webpack预览页面配置相关推荐

最新文章

热门文章