html模块殃射,【Web前端问题】webpack打包后，module模块中的函数无法在html标签的事件中调用？...

折腾了好久，求大佬指点~~最近才开始接触webpack以及ES6的module，可能理解的有问题吧。。。希望大佬来指点一下我这个菜鸟。

我的想法是在一个module中定义函数，在HTML的中用onclick事件调用这个函数。

module模块代码：

— base.js —

export default {

msg: 'Hello World!',

objClick: function() {

console.log('Obj.clickFunction');

return 'Obj.clickFunction';

}

webpack的entry文件：

— home.js —

import base from './base.js';

function myFunction() {

let objClickVal = base.objClick();

console.log('objClickVal:', objClickVal);

return ;

}

console.log('base.msg:', base.msg);

console.log('base.objClick:', base.objClick);

webpack配置：

module.exports = {

entry: {

home: './js/home.js',

output: {

filename: '[name].bundle.js',

path: __dirname + '/dist',

}

home页面

部分：

— home.html —

ObjClick

Base.ObjClick

npm运行webpack打包后，控制台显示：

base.msg: Hello World! home.bundle.js:124

base.objClick: ƒ () { home.bundle.js:126

console.log('Obj.clickFunction');

return 'Obj.clickFunction';

}

base.msg、base.objClick都显示出来了，证明module已经成功导入进来了，但是在点击button的时候显示：

Uncaught ReferenceError: myFunction is not defined

at HTMLButtonElement.onclick (home.html:18)

onclick @ home.html:18

Uncaught ReferenceError: base is not defined

at HTMLButtonElement.onclick (home.html:19)

onclick @ home.html:19

onclick无论是直接调用base对象里的函数，还是调用home.js里定义的函数，都显示未定义。。。究竟该怎么实现呢？？？

回答：

module中定义的函数不是全局的，改用事件监听

回答：

在window 写下一个全局函数

this.hanshu = function(){

return "hanshu!";

}

然后在你的html 标签内加上

οnclick=”hanshu()”;

即可。

今天遇到同样的问题，为了后端好绑，自己写个函数让他们调用去吧，我可不想闲着再命名了…哈哈哈

html模块殃射,【Web前端问题】webpack打包后，module模块中的函数无法在html标签的事件中调用？...相关推荐

Webpack打包后模块分析
测试代码如下代码为要打包的代码以及相应的模块 // index.js const calculator = require('./calculator.js'); const sum = calcu ...
前端开发--webpack打包工具
#博学谷IT学习技术支持# 目录 webpack基本概念 webpack的安装 webpack的配置入口和出口相关配置插件-自动生成html文件加载器 - 处理css文件问题加载器 - 处理图 ...
webpack打包后的文件夹是空的_深入理解 Webpack 打包分块（下）
前言随着前端代码需要处理的业务越来越繁重,我们不得不面临的一个问题是前端的代码体积也变得越来越庞大.这造成无论是在调式还是在上线时都需要花长时间等待编译完成,并且用户也不得不花额外的时间和带宽下载更 ...
使用webpack打包后，vscode中vue代码变白色的解决办法
使用webpack打包后,vscode中vue代码变白色的解决办法卸载vetur,重装vetur
webpack打包后引用cdn的js_利用CDN加速react webpack打包后的文件详解
此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置) ...
alive的不生效 keep vue_vue解决使用webpack打包后keep-alive不生效的方法
问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下 ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
在vue项目中webpack打包后字体不生效
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
nginx禁止浏览器直接打开webpack打包后的js文件
应公司安全测试要求,webpack打包后的js文件不能直接在浏览器打开. 解决方法:通过nginx配置文件过滤,跳转到403页面,代码如下: location / {set $flag 0;if ($ ...

html模块殃射,【Web前端问题】webpack打包后，module模块中的函数无法在html标签的事件中调用？...

html模块殃射,【Web前端问题】webpack打包后，module模块中的函数无法在html标签的事件中调用？...相关推荐

最新文章

热门文章