webpack——在html中使用js函数

最新推荐文章于 2025-01-20 10:58:09 发布
原创 最新推荐文章于 2025-01-20 10:58:09 发布 · 4.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack

本文介绍了在使用Webpack打包JS文件后，如何解决在HTML中调用JS函数时报错的问题。通过将函数作用域提升到window对象上，可以避免局部变量无法被外部访问的情况。

问题

在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 1756
背景 学习前端或者有做前端的同学，肯定有发现，写了一些高阶的语法，在浏览器是没办法直接运行的，这个时候，通过会利用webpack来进行打包降级处理。但是会遇到如题的问题。 eg: html文件 <input id="move-to-left" type="button" onClick="moveToLeft();" value="左移" /> 被打包的js文件 // 向左移动地图 function moveToLeft() { var view = map.getVie
25.重学webpack——梳理tapable的九大钩子函数的使用及原理
2024路在何方
08-09 1412
【重学webpack系列——webpack5.0】 1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。 从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。 可以点击上方专栏订阅哦。 以下是本节正文： webpack实现插件的流程： 创建 - webpack在其内部对象上创建各种钩子Hook 注册 - 插件讲自己的方法注册到对应的钩子Hook上，交给webpack 调用 - webpack编
html中如何引用webpack编译出来的js中的变量
HansExploration的博客
01-24 3659
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原理与实践
Garbrielle的博客
03-02 957
webpack
导出的js模块怎么在html里用,Webpack：导出到窗口中的现有模块
weixin_29748637的博客
06-18 292
我的目标是使用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 435
折腾了好久，求大佬指点~~最近才开始接触webpack以及ES6的module，可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。我的想法是在一个module中定义函数，在HTML的中用onclick事件调用这个函数。module模块代码：-- base.js --export default {msg: 'Hello World!',objClick: function() {console...
Webpack——编译结果简化分析
jydchudq的博客
07-09 1191
为了更好地学习Webpack的工作原理，本文将从一个实际的角度出发，对编译结果进行简化分析。本文将以两个基础模块为例，模拟一个简化的编译结果，将编译结果中的每个部分逐一拆解，用浅显的语言解释其作用和意义。
1. 重学webpack——webpack5.0基本概念
2024路在何方
06-23 1271
推荐：《webpack学完这些就够了》 《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。 以下是本节正文： 1. webpack基本概念 webpack支持CommonJs和ES Module 在pacakge.json的scripts中，dev中原先配置使用的webpack-dev-server,现在只小改成ser
18.重学webpack——webpack动态加载原理/webpack异步加载原理/webpack动态解析import()原理
2024路在何方
08-03 3566
【重学webpack系列——webpack5.0】 1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。 从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。 可以点击上方专栏订阅哦。 以下是本节正文： import()对于webpack来说，是一个天然的分割点，也就是说，webpack碰到import()会对import()进行解析。怎么解析的，过程主要是： 面试题：webpack解析impo
一文大白话讲清楚webpack基本使用——5——babel的配置和使用
最新发布
xiaobangkeji的博客
01-20 1472
一文大白话讲清楚webpack基本使用——5——babel的配置和使用
webpack--css、html 和 js 代码的常用处理
Jack, what else can you do besides holding your little darling?
12-07 527
webpack--css、html 和 js 代码的常用处理
webpack html转成js,WebPack的基础学习
weixin_36152359的博客
07-09 539
WebpackWebpack 是一个前端的静态模块资源打包工具，能让浏览器也支持模块化。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 核心主要进行 JavaScript 资源打包如下图，它可以结合其他插件工具，将多种静态资源css、png、sass 分类转换成一个个静态文件，这样可以减少页面的请求。可集成 babel 工具实现 EcmaScri...
webpack对html压缩,webpack打包html压缩了html中的js没有压缩？
weixin_35756624的博客
06-03 458
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 324
本文介绍了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 631
折腾了好久，求大佬指点~~最近才开始接触webpack以及ES6的module，可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。我的想法是在一个module中定义函数，在HTML的中用onclick事件调用这个函数。module模块代码：— base.js —export default {msg: 'Hello World!',objClick: function() {console.l...
webpack打包后的函数，不能访问提示未定义？？
印心石屋
12-12 4912
webpack打包后，在文件定义的变量属于内部变量。也就是说webpack把各个文件封装。。使得你无法访问 function warning(){ alert('FF') } 解决方式是给warning()定义的时候，定义成全局变量，也就是 window.warning = function(){ alert('FF') }...
webpack html模块化,webpack 模块化机制
weixin_35970195的博客
06-30 289
为什么需要模块化？随着网站内容越来越复杂，浏览器和用户的交互越来越细腻，网站再也不是简单的内容呈现，更像是一个复杂的客户端软件，其中html/css/js代码越来越多，逻辑越来越复杂，越来越不便于管理，为了解决这个问题，才出现了模块化的概念，也就是说模块化更多的是工程方面的产出，为了应对更复杂的网站开发。梳理下网站的发展过程，大家也就知道为什么模块化是必然出现的了：✦ 早期一个html文件，通过s...
webpack处理html
小菜鸟的博客
02-04 437
webpack html资源
html a标签module,webpack打包后，module模块中的函数无法在html标签的事件中调用？...
weixin_29164185的博客
06-25 401
折腾了好久，求大佬指点~~最近才开始接触webpack以及ES6的module，可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。我的想法是在一个module中定义函数，在HTML的中用onclick事件调用这个函数。module模块代码：-- base.js --export default {msg: 'Hello World!',objClick: function() {console...
Phaser在HTML5游戏开发中的应用指南
它由Richard Davey创建，使用JavaScript编写，可以运行在所有现代浏览器中。Phaser支持游戏开发的整个生命周期，包括资源加载、动画、物理引擎、音频以及粒子效果等。其设计哲学是让开发者能够快速上手并构建游戏，...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值