配置 html-webpack-plugin 生成预览页面||配置自动打包相关的参数

2024-05-17 13:35:06

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

① 运行 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 文件中向外暴露的配置对象，新增如下配置节点：

module.exports = {

plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表

}

配置自动打包相关的参数

// package.json中的配置

// --open 打包完成后自动打开浏览器页面

// --host 配置 IP 地址

// --port 配置端口

"scripts": {

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

},

配置 html-webpack-plugin 生成预览页面||配置自动打包相关的参数相关推荐

webpack预览页面配置
应用场景:当我们配置了webpack自动打包工具后,通过 http://localhost:8080/ 访问到的是文件夹根目录,而没有直接打开html页面,如果要打开html页面需要在界面中点击指定的 ...
Android相机预览页面被压缩和拉伸问题
最近公司要求在原有的项目中添加一个扫码登录的功能,在调试好相机之后,发现相机返回到Surfaceview页面上的预览图片,与我们现实中物品的比例并不相同,在一块正方形的Surfaceview中,预览界 ...
实现微信小程序预览文件，预览页面添加倒计时
项目场景: 提示:1.实现小程序预览doc.docx.xls.xlsx.ppt.pptx.pdf类型文件 2.进入页面展示文件内容.开始按钮,点击,按钮变为[(**s)]倒计时 3.倒计时结束后,此按 ...
ppt怎么生成预览图
ppt怎么生成预览图如上图格式! 需要用到软件 1.Powerpoint 2.ISlide 如下图 ISlide软件下载地址 https://static.islide.cc/site/produc ...
原生JS调用打印预览页面并实现打印文件流图片（亲测有效）
在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印,那么如何才能够在打印预览页面中显示图片呢?希望看完这篇文章对您有所帮助! 1. 原生JS调用打印预览页面 2. 在打印预览页面加载图片使用 ...
微信小程序分享朋友圈预览页面资源不加载，空白页问题解决
问题描述分享到朋友圈,点击进入页面图片等等资源不加载解决方式我之前把获取数据接口写在onShow()生命周期中,发现预览页面不会触发onShow,只会触发onLoad生命周期将获取内容逻辑接口 ...
在线画时序图的工具：Web Sequence Diagrams ，支持实时生成预览图
因为工作需要,这两天在尝试着给手里壹些模块画时序图(Sequence Diagrams),壹般画这种图的时候,我们第壹反应会想到安装 IBM 的 Rational Rose,但是我不想为了画这种图就去 ...
SAP-MM:物料采购订单的客制化开发与对应打印/预览的配置
Preface 由于之间工作的转变,从原来相对纯粹单一的SAP本地化薪酬方案的实施与维护,变成了现在企业内部新增的业务需求在SAP系统上的配置与再开发.这个转变确实有了很大的变化,也伴随着相当大的挑战 ...
java 视频预览_java在上传视频时生成预览图
在圣品上传时往往需要生成一张预览图(缩略图),如果在非特殊情况下让用户单独上传,会造成工作压力,此时可以用视频中某一帧作为封面图,实现方式如下: public class ImageUtil { /* ...

最新文章

热门文章