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

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

npm install expose-loader --save-dev

2、webpack.config.js配置文件

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

javascript 复制代码
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' // 替换为你想要暴露的全局变量名
            }
          }
        ]
      }
    ]
  }
};
相关推荐
橘子星2 分钟前
别再懵圈!JS 执行机制的 “千层套路” 全揭秘
前端·javascript
GuWenyue2 分钟前
LeetCode 76 最小覆盖子串|JS 滑动窗口标准解法
前端·算法·面试
YHHLAI3 分钟前
前端 HTTP 请求 & LLM 接口开发
前端·网络协议·http
拾年2755 分钟前
__proto__ vs prototype:90% 的人分不清的 JavaScript 核心
前端·javascript·面试
国科安芯6 分钟前
国科安芯推出商业航天级抗辐照半双工 RS485 收发器 ASC485S2Y
前端·单片机·嵌入式硬件·架构·安全性测试
丑过三八线6 分钟前
Umi 运行时配置 app.tsx 详解
前端
提子拌饭13322 分钟前
个人月事记录表应用 - 鸿蒙PC Electron框架完整实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙系统
超人气王30 分钟前
新手学前端JS浅拷贝和深拷贝:对象复制竟然是个“替身文学”?
javascript·面试
YHL31 分钟前
📚 JS执行机制(执行上下文 + 调用栈 + 编译流程)
前端·javascript
不简说36 分钟前
这次真香!sv-print 可视化打印设计器更新:插件脚手架、Excel 导出、弹窗 API 三连发
前端·javascript·前端框架