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

Question

我有一个简单的 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)
        }()
    }

当我不使用我的 bundle.js 只有 main.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

Answer 1

Webpack 是 tree shaking 您的函数，因为它不会在整个入口点被调用或引用。此外，即使它不是 tree shaking，webpack 也是一个模块打包器，所以如果它没有在全局范围内声明（即 window.myFunction = function(arg) { return arg }），它会限定你的函数的范围（即 window.myFunction = function(arg) { return arg }）。

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup.

Here's a solution 这似乎与您的 use-case.

相对应

Answer 2

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

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

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

Why my function is not present in bundle.js?

javascript

node.js

webpack

webpack-dev-server