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

目录
相关文章
|
4天前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
|
4天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
13 2
|
1月前
|
安全 搜索推荐 数据安全/隐私保护
深入探讨HTTPS协议的原理和工作流程
【2月更文挑战第10天】
36 4
深入探讨HTTPS协议的原理和工作流程
|
2月前
|
安全 算法 Java
【JavaEE初阶】 详解HTTPS协议加密过程
【JavaEE初阶】 详解HTTPS协议加密过程
|
2月前
|
前端开发 JavaScript 安全
|
2月前
|
前端开发 JavaScript Java
|
3月前
|
安全 算法 网络安全
浏览器 HTTPS 协议的相关知识点有哪些?
浏览器 HTTPS 协议的相关知识点有哪些?
20 0
|
XML 缓存 算法
HTTP协议详解
HTTP协议详解
495 1
HTTP协议详解
|
Web App开发 网络协议 .NET
第206天:http协议终极详解---看这一篇就够了
HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。
2911 0
|
Web App开发 缓存 前端开发
HTTP协议详解
当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等。 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了Web应用程序的内部工作. 本文将对HTTP协议进行详细的实例讲解,内容较多,希望大家耐心看。
1283 0