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' // 替换为你想要暴露的全局变量名
            }
          }
        ]
      }
    ]
  }
};
相关推荐
万物得其道者成7 分钟前
Vue3 使用 Notification 浏览器通知,解决页面关闭后旧通知点击无法跳转问题
前端·vue.js·edge浏览器
ShineWinsu10 分钟前
CSS 技术文章
前端·css
天若有情67320 分钟前
反向封神!C++ 全局单例不避反用,实现无锁多线程函数独占访问
java·javascript·c++
张风捷特烈22 分钟前
状态管理大乱斗#02 | Bloc 源码全面评析
android·前端·flutter
将心ONE1 小时前
pathlib Path函数的使用
java·linux·前端
lingzhilab1 小时前
零知派——ESP32-S3 AI 小智 使用 Preferences NVS 实现Web配网持久化
前端
阿亮爱学代码1 小时前
日期与滚动视图
java·前端·scrollview
欧米欧1 小时前
STRING的底层实现
前端·c++·算法
2301_814809861 小时前
踩坑实战pywebview:用 Python + Web 技术打造轻量级桌面应用
开发语言·前端·python
LIO1 小时前
Vue 3 实战——搜索框检索高亮的优雅实现
前端·vue.js