折騰了好久，求大佬指點~~最近才開始接觸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标签的事件中调用？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。