webpack——在html中使用js函数

最新推荐文章于 2025-06-08 01:12:26 发布
最新推荐文章于 2025-06-08 01:12:26 发布
阅读量4k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mxw322/article/details/81162891
本文介绍了在使用Webpack打包JS文件后，如何解决在HTML中调用JS函数时报错的问题。通过将函数作用域提升到window对象上，可以避免局部变量无法被外部访问的情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

在web前端项目中，使用webpack打包js文件，在html中使用js中的函数时，浏览器端报如下错误：
这里写图片描述

解决方法

  • 查看js文件的引用路径是否正确，一般情况下，webpack能够成功打包生成bundle.js文件说明路径没有出错，其次，webpack也会在html中自动引入js路径
  • 在js文件要引用的函数中将其作用域提升，在函数前添加window.；如：window.addGeoserverMap = xxx

原因

在js文件中定义的变量是属于内部局部变量（webpack打包之后生成的js其实是一个函数），需要提升变量的作用域范围

慎独·省
关注
html文件调用webpack打包js文件出现函数not defined
wltsysterm的博客
07-21 1626
背景 学习前端或者有做前端的同学，肯定有发现，写了一些高阶的语法，在浏览器是没办法直接运行的，这个时候，通过会利用webpack来进行打包降级处理。但是会遇到如题的问题。 eg: html文件 <input id="move-to-left" type="button" onClick="moveToLeft();" value="左移" /> 被打包的js文件 // 向左移动地图 function moveToLeft() { var view = map.getVie
Webpack——编译结果简化分析
jydchudq的博客
07-09 1113
为了更好地学习Webpack的工作原理，本文将从一个实际的角度出发，对编译结果进行简化分析。本文将以两个基础模块为例，模拟一个简化的编译结果，将编译结果中的每个部分逐一拆解，用浅显的语言解释其作用和意义。
html中如何引用webpack编译出来的js中的变量
HansExploration的博客
01-24 3642
js代码： class H_Vue { constructor(obj) { } } html代码： &lt;body&gt; &lt;script&gt; window.onload = () =&gt; { let a = new H_Vue console.log(a) } &lt;/script&gt; &lt;/...
从零掌握 Webpack：原理 + 配置 + 实战全指南
最新发布
kkkkasad的博客
06-08 1009
模块化指的是将代码拆成功能单一的文件，每个文件内部维护自己的作用域与功能。我们通过import和exportES：即 ECMAScript，JavaScript 的标准。ESM（ES Modules）：即 ES6 引入的模块系统，通过 import 和 export 语法进行模块化。HMR 即热模块替换，是一种在应用运行时，替换、添加或删除模块的技术，而无需整个页面刷新。它能极大提升开发体验，快速反馈修改结果。Tree Shaking 是一种“摇掉没用代码”的优化技术。
导出的js模块怎么在html里用,Webpack：导出到窗口中的现有模块
weixin_29748637的博客
06-18 276
我的目标是使用Webpack将隔离的组件导出到假定的全局对象中。index.htmlvar MyApp = window.MyApp || {};MyApp.something = MyApp.something || {};//// other modules/components loaded here...//MyApp.something.myIsolatedModule.run();在上...
html怎么封装模块调用,webpack打包后，module模块中的函数无法在html标签的事件中调用？...
weixin_34434843的博客
06-04 420
折腾了好久，求大佬指点~~最近才开始接触webpack以及ES6的module，可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。我的想法是在一个module中定义函数，在HTML的中用onclick事件调用这个函数。module模块代码：-- base.js --export default {msg: 'Hello World!',objClick: function() {console...
webpack--css、html 和 js 代码的常用处理
Jack, what else can you do besides holding your little darling?
12-07 508
webpack--css、html 和 js 代码的常用处理
一文大白话讲清楚webpack基本使用——5——babel的配置和使用
xiaobangkeji的博客
01-20 1364
一文大白话讲清楚webpack基本使用——5——babel的配置和使用
一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用
xiaobangkeji的博客
01-21 1988
一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用
Webpack——ES6转ES5
热门推荐
会飞的小鹿
10-15 1万+
万恶的IE遗臭万年仍然需要填坑 ie标准对html/css甚至js的规范简直相差甚远，所以，一般要解决的兼容问题很大一部分是为了解决ie的不兼容，虽然目前流行的ES6语法及规范将IE的考虑抛弃掉，默认放弃对IE的治疗，但是IE的兼容仍然是个问题！即使IE的使用率已经不到1%的市场占比。 我们使用着舒服的ES6规范但是为IE又很头疼怎么办呢？Webpack开发了非常厉害的打包转换功能：转ES5！ ...
webpack——搭建多页面之 glob
肖的博客
10-22 957
glob 在 webpack 中对文件的路径处理非常之方便，比如当搭建多页面应用时就可以使用 glob 对页面需要打包文件的路径进行很好的处理 官方文档 npm install glob -save-dev const glob = require('glob') try { entries = glob('src/pages/*/main.js', { sync: true }) }...
webpack html转成js,WebPack的基础学习
weixin_36152359的博客
07-09 527
WebpackWebpack 是一个前端的静态模块资源打包工具，能让浏览器也支持模块化。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 核心主要进行 JavaScript 资源打包如下图，它可以结合其他插件工具，将多种静态资源css、png、sass 分类转换成一个个静态文件，这样可以减少页面的请求。可集成 babel 工具实现 EcmaScri...
webpack对html压缩,webpack打包html压缩了html中的js没有压缩？
weixin_35756624的博客
06-03 450
webpack配置打包压缩html，html压缩了，但是html中写的script标签中的js没有压缩怎么办？webpack.common.jsconst webpack = require("webpack");const path = require('path');const glob = require('glob');const HtmlWebpackPlugin = require('...
bable转换html里面的js,webpack使用 babel-loader 转换 ES6代码示例
weixin_35895056的博客
05-31 310
本文介绍了webpack使用 babel-loader 转换 ES6代码示例，分享给大家，具体如下：查询各个 loader的使用，可以在官网上查询。https://www.npmjs.com(一)安装 babel-loader，babel-core。使用命令npm install --save-dev babel-loader babel-core因为ES6语法每年都在更新，因此，我们需要一定的规...
html5 调用不了函数,【前端】webpack打包后，module模块中的函数无法在html标签的事件中调用？...
weixin_28703451的博客
06-04 613
折腾了好久，求大佬指点~~最近才开始接触webpack以及ES6的module，可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。我的想法是在一个module中定义函数，在HTML的中用onclick事件调用这个函数。module模块代码：— base.js —export default {msg: 'Hello World!',objClick: function() {console.l...
webpack打包后的函数，不能访问提示未定义？？
印心石屋
12-12 4876
webpack打包后，在文件定义的变量属于内部变量。也就是说webpack把各个文件封装。。使得你无法访问 function warning(){ alert('FF') } 解决方式是给warning()定义的时候，定义成全局变量，也就是 window.warning = function(){ alert('FF') }...
webpack html模块化,webpack 模块化机制
weixin_35970195的博客
06-30 275
为什么需要模块化？随着网站内容越来越复杂，浏览器和用户的交互越来越细腻，网站再也不是简单的内容呈现，更像是一个复杂的客户端软件，其中html/css/js代码越来越多，逻辑越来越复杂，越来越不便于管理，为了解决这个问题，才出现了模块化的概念，也就是说模块化更多的是工程方面的产出，为了应对更复杂的网站开发。梳理下网站的发展过程，大家也就知道为什么模块化是必然出现的了：✦ 早期一个html文件，通过s...
webpack处理html
小菜鸟的博客
02-04 422
webpack html资源
html a标签module,webpack打包后，module模块中的函数无法在html标签的事件中调用？...
weixin_29164185的博客
06-25 386
折腾了好久，求大佬指点~~最近才开始接触webpack以及ES6的module，可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。我的想法是在一个module中定义函数，在HTML的中用onclick事件调用这个函数。module模块代码：-- base.js --export default {msg: 'Hello World!',objClick: function() {console...
Phaser在HTML5游戏开发中的应用指南
它由Richard Davey创建，使用JavaScript编写，可以运行在所有现代浏览器中。Phaser支持游戏开发的整个生命周期，包括资源加载、动画、物理引擎、音频以及粒子效果等。其设计哲学是让开发者能够快速上手并构建游戏，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值