为什么我的函数不存在于bundle.js中？

问题描述

我有一个简单的JS网络应用程序，在main.js中有一个函数可以处理按钮的onclick事件。

index.html：

<input type="button" class="btn btn-dark" value="Submit" onclick="onSubmitButtonpressed()">

...

<script src="./dist/bundle.js"></script>

main.js：

function onSubmitButtonpressed() {
    // some DOM manipulating stuff 
}

webpack.config.js

var path = require('path');

module.exports = {
    entry: './main.js',output: {
        path: path.join(__dirname,'/dist'),filename: 'bundle.js',publicPath: '/dist'
    },devServer: {
        port: 8000,}
}

我正在使用webpack，似乎我的onSubmitButtonpressed()函数未生成到bundle.js中

---

其他信息：

我试图这样导出函数：

module.exports = {
    onSubmitButtonpressed: onSubmitButtonpressed(),}

此后，我的函数将像这样生成到bundle.js中，但不起作用：

e.exports = {
        onSubmitButtonpressed: function () {
            const e = document.getElementById("input-text").value;
            r.push(e);
            let t = document.createElement("LI");
            t.innerHTML = e,t.className = "list-group-item",n.appendChild(t)
        }()
    }

当我只使用main.js而不使用我的bundle.js时，一切都很好。

---

基于以下建议（已解决原始问题），我更新了我的

webpack.config.js具有：

optimization: {
    minimize: false 
}

我的bundle.js中有onSubmitButtonpressed（）函数：

...

function onSubmitButtonpressed() {
    const inputText = document.getElementById('input-text').value;
    items.push(inputText)
    let child = document.createElement("LI");
    child.innerHTML = inputText;
    child.className = 'list-group-item';
    itemsUl.appendChild(child);
    console.log('Called');
}

window.onSubmitButtonpressed = onSubmitButtonpressed

...

我还添加了这一行，以使我的功能可以全局使用：

window.onSubmitButtonpressed = onSubmitButtonpressed

解决方法

Webpack是tree shaking的函数，因为在整个入口点都不会调用或引用它。另外，即使没有摇晃树，webpack还是一个模块捆绑器，因此，如果未在全局作用域（即window.myFunction = function(arg) { return arg }）上声明它，它将对您的函数进行作用域。

树抖动是JavaScript上下文中常用于消除死代码的术语。它依赖于ES2015模块语法的静态结构，即导入和导出。名称和概念已在ES2015模块捆绑程序汇总中流行。

Here's a solution似乎与您的用例相对应。

,

这是因为webpack将function onSubmitButtonPressed视为本地（而非全局）功能。

在文件末尾使用window.onSubmitButtonPressed = onSubmitButtonPressed，以使其全局可用。