webpack项目 index.html 根据不同的变量引入不同的js

项目 webpack搭建

问题:在入口文件index.html中根据不同的变量引入不同的js

使用插件HtmlWebpackPlugin

HtmlWebpackPlugin 项目里用来生成静态文件的
这个插件每个项目基本都要用到的,只要全局搜一下位置

根据配置文件的指令找到执行的文件,env_config变量直接在指令中负值。这里我们使用npm run dev

在这里插入图片描述


new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true,
      favicon: resolve("favicon.ico"),
      title: "zyouth-web",
      templateParameters: {
        env_config:process.env.env_config,
        BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
      }
    })

templateParameters中的变量就能直接在index.html中使用

<% if(env_config === "sit" || env_config === "devonline"||env_config === "dev"){%>
      <script src="./dll/_dll_lib.js"></script>
    <%} %>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[点云分割] 区域增长分割

效果&#xff1a; 原始数据 分割结果 代码&#xff1a; #include <iostream> #include <vector> #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> // 各种点云数据类型 #include <pcl/search/search.h> #include <pcl/search/kdtr…

【Java】基于SaaS模式的Java基层医院卫生健康云HIS系统源码

一、模板管理 模板分为两种&#xff1a;病历模板和报表模板。模板管理是运营管理的核心组成部分&#xff0c;是基层卫生健康云中各医疗机构定制电子病历和报表的地方&#xff0c;各医疗机构可根据自身特点特色定制电子病历和报表&#xff0c;制作的电子病历及报表可直接在业务…

CSS画一条线

<p style"border: 1px solid rgba(0, 0, 0, 0.1);"></p> 效果&#xff1a;

Power Apps-Timer

插入一个计时器 右侧属性面板&#xff0c;持续时间的单位是毫秒&#xff0c;60000就是60秒&#xff08;一分钟&#xff09;&#xff1b;开启重复是指60秒结束后重新开始计时&#xff1b;自动启动是指当从其他页面进入时是否自动开始计时&#xff1b;自动暂停是指当离开这个页面…

Python语言:猜数字游戏案例讲解

猜数字游戏题目要求如下&#xff1a;该程序随机生成一个1到100之间的整数&#xff0c;然后要求玩家在有限的次数内猜出这个数字。如果玩家猜对了&#xff0c;游戏结束并显示成功信息&#xff1b;如果玩家猜错了&#xff0c;程序会提示玩家猜的数字是偏大还是偏小&#xff0c;并…

VsCode连接远程Linux编译环境的便捷处理

1.免输登录密码 免输命令的正确方法是使用公钥和私鈅在研发设备&#xff0c;和linux服务器上校验身份。公钥和私钥可在windows系统上生成。公钥要发送到linux服务器。私钥需要通知给本地的ssh客户端程序&#xff0c;相关的操作如下&#xff1a; 生成 SSH Key&#xff1a; 打开…

如何编辑WordPress配置文件wp-config.php

目录 wp-config.php文件全部内容&#xff1a; 修改wp-config.ph文件中的数据库设置&#xff1a; 设置wp-config.ph文件中的密钥部分 修改数据库表前缀 设置绝对路径 WordPress会把数据库的相关信息存在wp-config.php文件中。如果编辑有问题&#xff0c;则会出现建立数据库连…

C语言--每日五道选择题-- Day22

第一题&#xff08;注意&#xff09; 1.下列 C 代码中&#xff0c;不属于未定义行为的有&#xff1a;______。 A&#xff1a;int i0; i(i); B&#xff1a;char *p"hello"; p[1]E; C&#xff1a;char *p"hello"; char ch*p; D&#xff1a;int i0; printf(&q…

Leo赠书活动-10期 【AIGC重塑教育 AI大模型驱动的教育变革与实践】文末送书

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠书活动专栏 ✨特色专栏&#xff1a;…

【SpringBoot】ThreadLocal 的详解

一、ThreadLocal 简介 ThreadLocal 叫做线程变量&#xff0c;意思是 ThreadLocal 中填充的变量属于当前线程&#xff0c;该变量对其他线程而言是隔离的&#xff0c;也就是说该变量是当前线程独有的变量。ThreadLocal 为变量在每个线程中都创建了一个副本&#xff0c;那么每个线…

Redis 性能管理 主从复制与哨兵模式

目录 redis性能管理 内存碎片率 如何清理内存 面试题 Redis雪崩 Redis集群大面积故障 面试&#xff1a;Redis的缓存击穿 Redis的缓存穿透 Redis的集群高可用方案 redis的主从复制 哨兵模式 redis性能管理 redis的数据缓存在内存当中 info memory #在redis数据库中查…

npm ERR!问题解决

问题一 解决办法 两个文件夹【node_global】和【node_cache】 修改文件属性 问题二 解决办法 安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 查看是否成功&#xff1a; npm config get registry 是淘宝的就ok

口袋参谋:只用一招,提前规避差评!请看具体操作步骤

​如何提前规避差评&#xff1f;至少99%的商家都不知道该怎么做&#xff0c;剩下的1%还是我刚教会的。 宝贝的评价直接影响宝贝转化&#xff0c;特别是新品链接。 10个好评也挽回不了一个差评对产品的致命打击&#xff0c;差评就像一个重磅炸弹&#xff0c;威力足够能让你的转…

【Java】实现阻塞队列-生产者/消费者模型

上文中我们讲了Java库中自带的阻塞队列&#xff0c;并且讲了如何用阻塞队列来实现生产者消费者模型 【Java】用Java库中自带的阻塞队列以及用阻塞队列实现生产者-消费者模型 下面我们来讲如何用代码实现一个阻塞队列 1、实现一个阻塞队列 阻塞队列 普通队列 线程安全 阻…

基于springboot实现摄影跟拍预定管理系统【项目源码+论文说明】

基于springboot实现摄影跟拍预定管理系统演示 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要…

SD3403/SS928 视频采集调试记录

问题1&#xff1a;运行 ./sample_vio 0 报错 问题2&#xff1a;板卡连接摄像模组后无法ping同 错误原因&#xff1a; 摄像头模组连接错误 修改后重新调试 下一步 外接显示屏查看输入输出 ...

产品工程师工作的职责十篇(合集)

一、岗位职责的作用意义 1.可以最大限度地实现劳动用工的科学配置; 2.有效地防止因职务重叠而发生的工作扯皮现象; 3.提高内部竞争活力&#xff0c;更好地发现和使用人才; 4.组织考核的依据; 5.提高工作效率和工作质量; 6.规范操作行为; 7.减少违章行为和违章事故的发生…

FlinkCDC实现主数据与各业务系统数据的一致性(瀚高、TIDB)

文章末尾附有flinkcdc对应瀚高数据库flink-cdc-connector代码下载地址 1、业务需求 目前项目有主数据系统和N个业务系统,为保障“一数一源”,各业务系统表涉及到主数据系统的字段都需用主数据系统表中的字段进行实时覆盖,这里以某个业务系统的一张表举例说明:业务系统表Ta…

9. BeanFactory 和 ApplicationContext有什么区别?

BeanFactory 和 ApplicationContext有什么区别&#xff1f; BeanFactory和ApplicationContext是Spring的两大核心接口&#xff0c;都可以当做Spring的容器。其中ApplicationContext是 BeanFactory的子接口。 依赖关系 BeanFactory&#xff1a;是Spring里面最顶层的接口&#…

springboot宠物领养系统-计算机毕设 附源码 44261

springboot宠物领养系统 摘 要 网络发布信息有其突出的优点&#xff0c;即信息量大&#xff0c;资源丰富&#xff0c;更新速度快等&#xff0c;很符合人们希望以捷、便利的方式获得最多最有效信息的要求。本系统就是一个网上宠物领养系统&#xff0c;为宠物爱好者提供一个信息…
最新文章