webpack如何把dist.js中某个模块js打包成一个全局变量,使得在html引入dist.js后可以直接访问

news2024/10/7 20:34:02
webpack可以通过使用expose-loader来将模块中的一个js文件暴露为全局可以访问的变量。下面是一个示例代码:
1、安装expose-loader

npm install expose-loader --save-dev

2、webpack.config.js配置文件

值得注意的是:我在本地使用16.14.2版本的node打包时会报一些警告,升级node18.12.1未报警告,警告信息如下:
在这里插入图片描述

module.exports = {
  entry: "./lib/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "dist.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: require.resolve('./lib/index.js'), // 模块的路径
        use: [
          {
            loader: 'expose-loader',
            options: {
              exposes: 'outName' // 替换为你想要暴露的全局变量名
            }
          }
        ]
      }
    ]
  }
};

在这里插入图片描述

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

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

相关文章

[docker] 关于docker的面试题

docker命名空间 docker与虚拟机的区别 容器虚拟机所有容器共享宿主机的内核每个虚拟机都有独立的操作系统和内核通过namespace实现资源隔离,通过cgroup实现限制资源的最大使用量完全隔离。每个虚拟机都有独立的硬件资源秒级启动速度分钟级启动速度容器相当于宿主机…

leetcode---Z字形变换

题目: 将一个给定字符串 s 根据给定的行数 numRows ,以从上往下、从左到右进行 Z 字形排列。比如输入字符串为 "PAYPALISHIRING" 行数为 3 时,排列如下:之后,你的输出需要从左往右逐行读取,产生…

第十二讲_ArkUI相对布局(RelativeContainer)

ArkUI相对布局(RelativeContainer) 1. 相对布局概述2. 相对布局的使用3. 子组件位置偏移量 1. 相对布局概述 RelativeContainer 为相对布局的容器组件,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也…

聊聊Git中的引用

一. 引言 什么是Git引用和分支?比如我在 Github 上一个项目的 .git/refs目录下: ├─heads │ dev │ master │ ├─remotes │ └─origin │ master │ └─tagsrefs 目录下包含了 heads、remote、tags 三个子目录,…

9. UE5 RPG创建UI(下)

在上一篇文章里,制作了显示血量和蓝量的ui,并且还将ui和获取数据使用的控制器层创建出来并初始化成功。现在只有主用户控件上面被添加了控制器层,还未给每个用户控件赋予控制器层。接下来要实现对属性的广播功能,在属性值变化的时…

时限挑战——深度解析Pytest插件 pytest-timeout

在软件开发中,测试用例的执行时间通常是一个关键考虑因素。Pytest插件 pytest-timeout 提供了一个强大的插件,允许你设置测试用例的超时时间。本文将深入介绍 pytest-timeout 插件的基本用法和实际案例,助你精确掌控测试用例的执行时限。 什么是pytest-timeout? pytest-tim…

实现AVL树

王有志,一个分享硬核Java技术的互金摸鱼侠 加入Java人的提桶跑路群:共同富裕的Java人 上一篇我们学习了平衡二分搜索树的理论知识,并学习了AVL树是如何保持二分搜索树的平衡的,今天我们一起来实现AVL树。Tips: AVL树和…

操作系统-进程控制(如何实现进程控制 如何实现原子性 相关进程控制原语)

文章目录 什么是进程控制总览如何实现进程控制?如何实现原语的“原子性”?进程控制相关的原语创建原语撤销原语子进程与父进程阻塞与唤醒原语切换原语 小结 什么是进程控制 控制进程的状态变换 总览 如何实现进程控制? 原语实现 假设不是原…

使用DockerFile构建镜像与镜像上传

目录 前言:为什么要使用Dockerfile ? DockerFile构建镜像 1、构建基础对象 2、Dockerfile文件结构 3、构建Dockerfile文件镜像 二、镜像上传(阿里云) 前言:为什么要使用Dockerfile ? 首先Dockerfile …

Linux系统Shell脚本 ----- 编程规范和变量详细解读

一、Shell脚本概述 1、什么是Shell Linux系统中运行的一种特殊程序在用户和内核之间充当“翻译官”用户登录Linux系统时,自动加载一个Shell程序Bash是Linux系统中默认使用的Shell程序 2、Shell的作用 Linux系统中的shell是一个特殊的应用程序,它介于操…

Ansys Lumerical|如何将Klayout Cell动态导入Lumerical Multiphysics

附件下载 联系工作人员获取附件 说明 在本例中,演示了如何将KLayout Library Cell动态导入 Lumerical 以执行设计扫描和表征。该功能支持动态导入到Lumerical FDTD、MODE以及Multiphysics的所有工具,包括CHARGE、HEAT、FEEM、MQW、DGTD。本例适用于&am…

【nginx实战】nginx正向代理、反向代理、由反向代理实现的负载均衡、故障转移详解

文章目录 一. 正向代理与反向代理的概念二. Nginx服务器的正向代理服务1. Nginx服务器正向代理服务的配置的3个指令1.1. resolver指令1.2. resolver_timeout指令1.3. proxy_pass指令 2. Nginx服务器正向代理服务的使用 三. Nginx服务器的反向代理服务1. 反向代理的基本指令1.1.…

pytest配置文件pytest.ini

说明: pytest.ini是pytest的全局配置文件,一般放在项目的根目录下是一个固定的文件-pytest.ini可以改变pytest的运行方式,设置配置信息,读取后按照配置的内容去运行 pytest.ini 设置参数 addopts 设置自定义执行参数&#xff0…

IDEA启动项目遇到的异常汇总,包括插件异常,版本依赖异常,启动异常等以及对应的解决办法

该文章旨在记录开发中遇到的一些异常,以供遇到似错误进行参考修改 一、项目在多个环境下切换,有一次启动后编译失败,报异常 背景:项目在不同环境下有对应的分支,切换分支后运行项目,报错如下 错误:Kotlin:…

赠书活动~

关注公众号获得,发送抽奖

PolarDB无感切换特性助力游戏领域高可用实践

❤️作者主页:小虚竹 ❤️作者简介:大家好,我是小虚竹。2022年度博客之星评选TOP 10🏆,Java领域优质创作者🏆,CSDN博客专家🏆,华为云享专家🏆,掘金年度人气作…

《WebKit 技术内幕》学习之六(2): CSS解释器和样式布局

2 CSS解释器和规则匹配 在了解了CSS的基本概念之后,下面来理解WebKit如何来解释CSS代码并选择相应的规则。通过介绍WebKit的主要设施帮助理解WebKit的内部工作原理和机制。 2.1 样式的WebKit表示类 在DOM树中,CSS样式可以包含在“style”元素中或者使…

依托物联网、互联网,建立云端大数据管理平台,形成“端+云+大数据”的智慧工地

概述: 智慧工地,是将物联网应用到建筑工地中,从施工现场源头抓起,最大程度的收集人员、安全、环境、材料等关键业务数据,依托物联网、互联网,建立云端大数据管理平台,的业务体系和新的管理模式…

Linux下用树莓派DS18B20温度传感器读取温度并上传至服务端

目录 一、DS18B20温度传感器 二、逻辑分析 三、实战操作 1、服务端 2、客户端 3、运行结果 一、DS18B20温度传感器 DS18B20是比较常用到的温度传感器,采用单总线控制。是美国DALLAS半导体公司继DS1820之后最新推出的一种改进型智能温度传感器。关于该温度传感…

Leetcode刷题笔记题解(C++):LCR 153. 二叉树中和为目标值的路径

思路:利用回溯的思想,回溯的退出条件为当前节点为空,是符合路径的判断条件为路径和为目标值且叶子节点包含了,代码如下: /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *…