webpack环境变量的设置

        现在虽然vite比较流行,但对于用node写后端来说,webpack倒是成了一个很好的打包工具,可以很好的保护后端的代码。所以这块的学习还是不能停下来,接下来我们来针对不同的环境做不同的设置写好笔记。

        引用场景主要是针对服务器的各种环境,比如生产环境呀,本地环境,开发环境呀。当然普遍是有两种但很难免会有多种环境,我们总不能又写很多套后端代码吧!

        文件如下创建多个打包配置文件与env配置文件,这样就可以不同的环境使用不同的配置了

        webapck 代码如下:也就两句话,当然输出的文件路径比如dist可以改为dist_use打包输出的地方用来区分不同环境下的文件即可。

但是打包的时候就要注意了不能直接webpack --config webpack.config.use.js

而是前面再加上自定义的环境变量如

 NODE_ENV=use webpack --config webpack.config.use.js

这样打包之后

process.env.NODE_ENV 这个环境变量的值即为use了。

然后入口文件中如何使用了?

index.js中只需根据环境判断取不同的配置即可如下图

这样哪怕你有再多的环境要配置,也不用发愁了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/157706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

0时区格林威治时间转换手机当地时间-Android

假设传入的是2023-11-01T12:59:10.420987这样的格式 要将格式为2023-11-01T12:59:10.420987的UTC时间字符串转换为Android设备本地时间,您可以使用java.time包中的类(在API 26及以上版本中可用)。如果您的应用需要支持较低版本的Android&…

docker通过挂载conf文件启动redis

初衷:之前直接在启动脚本中没有挂载配置文件,并且直接设置了密码等,后续要使用集群,苦于无法修改配置,进入redis容器也找不到redis.conf,所以写这个文章用来使用redis的配置,来达到后续都可动态…

《微信小程序开发从入门到实战》学习二十四

3.3.12开发创建投票多选投票页面 创建投票多选投票页面和创建单选投票页面没有区别,唯一区别仅在于向服务端发送数据时,告诉服务器这个投票是什么类型的投票。这个类型用三种数据类型表示都可以,分别如下所示: multiple:true/fa…

阿里 OSS鉴权访问文件

如果OSS文件设置保护,需要鉴权才能访问,添加请求头鉴权,SDK方法如上; 将鉴权信息和地址、时间返回给前端,前端直接从oss上读取 String filePath "/admin/2023/6/183569314928918546.png"; RequestMessage…

【C++上层应用】6. 信号 / 中断

文章目录 【 1. signal 函数 】【 2. raise函数 】 信号是由操作系统传给进程的 中断,会提早终止一个程序。在 UNIX、LINUX、Mac OS X 或 Windows 系统上,可以通过按 CtrlC 产生中断。有些信号不能被程序捕获,但是下表所列信号可以在程序中捕…

Git——感谢尚硅谷官方文档

Git——尚硅谷学习笔记 第1章 Git 概述1.1 何为版本控制1.2 为什么需要版本控制1.3 版本控制工具1.4 Git 简史1.5 Git 工作机制1.6 Git 和代码托管中心 第2章 Git 安装第 3 章 Git 常用命令3.1 设置用户签名3.2 初始化本地库3.3 查看本地库状态3.4 添加暂存区3.4.1 将工作区的文…

sklearn模型中预测值的R2_score为负数

目录 正文评论区参考链接 正文 Sklearn.metrics下面的r2_score函数用于计算R(确定系数:coefficient of determination)。它用来度量未来的样本是否可能通过模型被很好地预测。 分值为 1 表示最好,但我们在使用过程中&#xff0c…

媒体格式转换软件Permute 3 mac中文版软件特点

Permute mac是一款媒体格式转换软件,可以帮助用户快速地将各种音频、视频和图像文件转换成所需格式,并提供了一些常用工具以便于用户进行编辑和处理。 Permute mac软件特点 - 支持大量格式:支持几乎所有常见的音频、视频和图像格式&#xff…

Redis事务+秒杀案例

Redis事务是一个单独的隔离操作,是指将多条命令放在一个命令队列当中,按顺序执行,保证多个命令在同一个事务中执行而不受其他客户端的影响。 通俗来说就是:串联多个命令防止别的命令插队。 1.Multi、Exec、discard 在输入Multi命…

大数据Doris(二十七):Routine Load数据导入演示

文章目录 Routine Load数据导入演示 一、启动kafka集群(三台节点都启动) 二、创建topic

[SWPUCTF 2021 新生赛]非常简单的逻辑题 // %的逆向

代码解密题 flag xxxxxxxxxxxxxxxxxxxxx s wesyvbniazxchjko1973652048$-&*<> result for i in range(len(flag)):s1 ord(flag[i])//17s2 ord(flag[i])%17result s[(s1i)%34]s[-(s2i1)%34] print(result) # result v0b9n1nkajzj0c4jjo3oi1h1i937b395i5y5e0e…

2024电脑录屏软件排行第一Camtasia喀秋莎

真的要被录屏软件给搞疯了&#xff0c;本来公司说要给新人做个培训视频&#xff0c;想着把视频录屏一下&#xff0c;然后简单的剪辑一下就可以了。可谁知道录屏软件坑这么多&#xff0c;弄来弄去头都秃了&#xff0c;不过在头秃了几天之后&#xff0c;终于让我发现了一个值得“…

微信小程序面试题【100道】

文章目录 小程序面试题100问前言一、技术性问题1.有哪些参数传值的方法2.小程序修改数据值与Vue和React有什么差异3.如何实现下拉刷新与上拉加载4.bindtap和catchtap的区别是什么5.小程序有哪些导航API&#xff0c;它们各自的应用场景与差异区别是什么6.小程序中如何使用第三方…

城市易涝点怎么安装万宾科技内涝积水监测仪?

城市内涝是多个城市广泛存在的问题&#xff0c;经常给城市的居民和基础设施带来一些安全威胁。暴雨引发的道路积水和交通中断、财产损失&#xff0c;甚至公共安全威胁都是城市管理者需要提前预防的问题。为了解决这些问题&#xff0c;内涝积水监测仪的应用是一大重要的举措&…

CSDN流量卷领取和使用保姆级教程——流量卷,恭喜获得每日任务奖励【1500曝光】可获得新增曝光,阅读转化,点赞转化,新增关注-流量卷,流量卷,流量卷

希望本文能够给您带来一定的帮助&#xff0c;文章粗浅&#xff0c;敬请批评指正&#xff01; 目录 话不多说&#xff0c;直接上干货&#xff1a; 第一步&#xff1a;流量卷领取教程&#xff1a;点击内容管理&#xff1a;​编辑 第二步&#xff1a;点击首页&#xff1a;​编辑…

springcloud医院挂号预约系统源码

开发技术&#xff1a; jdk1.8&#xff0c;mysql5.7&#xff0c;nodejs&#xff0c;idea&#xff0c;vscode springcloud springboot mybatis vue elementui 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示医生列表&#xff0c;医院简介&#xff0c;点击医生…

2023年【上海市安全员C3证】考试内容及上海市安全员C3证复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 上海市安全员C3证考试内容是安全生产模拟考试一点通总题库中生成的一套上海市安全员C3证复审考试&#xff0c;安全生产模拟考试一点通上上海市安全员C3证作业手机同步练习。2023年【上海市安全员C3证】考试内容及上海…

在银行外包如何自我提升

作者&#xff1a;苍何&#xff0c;前大厂高级 Java 工程师&#xff0c;阿里云专家博主&#xff0c;CSDN 2023 年 实力新星&#xff0c;土木转码&#xff0c;现任部门技术 leader&#xff0c;专注于互联网技术分享&#xff0c;职场经验分享。 &#x1f525;热门文章推荐&#xf…

阿里云ECS服务器如何搭建并连接FTP,完整步骤

怎么用终端连接服务器就不多说了&#xff0c;直接开始搭建FTP。 我是用root账号执行的命令&#xff0c;如果不使用root账号&#xff0c;注意在命令前面加sudo。 一、安装FTP 我这里安装的是vsftpd。 1、检查是否已安装vsftpd&#xff1a; vsftpd -v如果出现了版本信息&…

智能座舱架构与芯片- (5) 硬件篇 下

四、短距无线连接 随着汽车智能化的发展与新型电子电气架构的演进&#xff0c;传统车内有线通信技术存在着诸多痛点&#xff1a; 线束长度增加&#xff1a;由于智能化与自动化的发展&#xff0c;车内传感器和执行器均大幅增加。采用有线技术连接&#xff0c;则线束长度&#…