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' // 替换为你想要暴露的全局变量名
            }
          }
        ]
      }
    ]
  }
};
相关推荐
李剑一1 天前
ant-design-vue 1.x 版本换肤功能开发
前端·vue.js·ant design
京东云开发者1 天前
【Coding生态】从代码托管到 AI 能力底座:与Coding一起共建 AI 研发生态
前端
guhy fighting1 天前
x-www-form-urlencoded,form-data,raw 表单请求格式的区别
前端·表单请求格式
李明卫杭州1 天前
Vue2 与 Vue3 自定义指令详解:钩子变化、迁移指南与实战示例
前端·javascript·vue.js
问商十三载1 天前
大模型GEO内容更新频率:3个节奏规律提收录权重,零成本提30%引用率附更新计划表
前端·人工智能·机器学习
yingyima1 天前
sed 命令速查手册:从一次午夜事故说起
前端
七月丶1 天前
线上出 Bug,你还在让用户"清一下缓存"?我用一个插件让每个请求自报版本
前端·javascript·面试
飘尘1 天前
让AI能够预演现实的世界模型,到底是什么?
前端·人工智能
不简说1 天前
JS 代码技巧 vol.3 — 10 个防抖节流深挖,小白到老炮的踩坑路
前端·javascript·面试
小智社群1 天前
VR漫游视频完整版
前端·javascript·音视频