webpack如何设置devServer启动项目为https协议

简介: webpack如何设置devServer启动项目为https协议

前言

通常情况下,webpack的devServer在启动本地项目时,默认都是http协议,但是有时候我们需要测试比如获取经纬度这些功能,就要求我们的协议是https,那么如何配置webpack的devServer,让其在启动项目的时候,默认是https协议呢?

如何配置webpack

很简单,我们只需要改webpack的devServer的其中一项配置,即可实现启动项目的时候,默认是https协议

devServer: {
  host: '0.0.0.0',
  port: 8080,
  https: true, // 加入这句即可
}

react脚手架如何配置webpack的devServer

  • 阅读react脚手架的webpack配置
  • 找到getHttpsConfig.js,发现关于devServer的https与process.env.HTTPS这一变量有关
  • 那么直接修改package.json的script打包命令,即可让启动本地项目时为https协议
  • 备注:在修改script命令前,先安装cross-env依赖
npm i cross-env -D

文章参考:https://blog.csdn.net/dclnet/article/details/96316401

目录
相关文章
|
16小时前
|
存储 算法 安全
[计算机网络]---Https协议
[计算机网络]---Https协议
|
16小时前
|
安全 网络协议 算法
【计算机网络】http协议的原理与应用,https是如何保证安全传输的
【计算机网络】http协议的原理与应用,https是如何保证安全传输的
|
16小时前
|
网络协议 安全 算法
HTTP协议与HTTPS协议
HTTP协议与HTTPS协议
|
16小时前
|
网络协议 安全
【专栏】`curl`是广泛用于网络编程和自动化脚本的命令行工具,支持HTTP、HTTPS等协议
【4月更文挑战第28天】`curl`是广泛用于网络编程和自动化脚本的命令行工具,支持HTTP、HTTPS等协议。在处理大文件或慢速服务器时,设置超时参数至关重要。本文介绍了`curl`的超时参数,如`-m`(最大操作时间)、`-c`(连接超时)、`--dns-timeout`(DNS解析超时)和`-t`(时间条件)。通过示例展示了如何设置这些超时,并提到了一些高级技巧和注意事项,如错误处理和带宽限制。合理设置超时能提高效率和可靠性,对编写健壮的自动化脚本非常有用。
|
16小时前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
16小时前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
20 2
|
16小时前
|
安全 网络安全 数据安全/隐私保护
HTTPS协议
HTTPS协议
22 0
|
16小时前
|
安全 网络安全 数据安全/隐私保护
HTTPS协议详解
HTTPS协议详解
16 1
|
17小时前
|
Web App开发 移动开发 JavaScript
Python网络编程(三),HTTP协议
Python网络编程(三),HTTP协议
66 0
|
17小时前
|
网络协议
【计算机网络-应用层】HTTP协议
【计算机网络-应用层】HTTP协议