CODEWITHSUNDEEP
javascriptnode.jswebpackwebpack-dev-server
Balázs Fodor-Pap
Balázs Fodor-Pap

Reputation: 608

Why my function is not present in bundle.js?

I have a simple JS web app where I have a function in my main.js which handle my button onclick event.

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,
    }
}

I am using webpack and seems like my onSubmitButtonPressed() function is not generated into bundle.js

Additional info:

I tried to export my function like this:

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

After this my function is generated into bundle.js like this, but not working:

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)
        }()
    }

When I don't use my bundle.js only the main.js then everything is working fine.

Based on the below suggestion (original issue solved), I updated my

webpack.config.js with:

optimization: {
    minimize: false 
}

I have my onSubmitButtonPressed() function in my bundle.js:

...

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

...

And I also add this line in order to make my function to make it globally available:

window.onSubmitButtonPressed = onSubmitButtonPressed

Upvotes: 0

Views: 1800

Answers (2)

Marco
Marco

Reputation: 7261

This is because webpack treats function onSubmitButtonPressed as a local (not global) function.

Use window.onSubmitButtonPressed = onSubmitButtonPressed at the end of the file to make it globally available.

Upvotes: 0

Jay Kariesch
Jay Kariesch

Reputation: 1482

Webpack is tree shaking your function as it's not called or referenced throughout your entrypoint. Also, even if it wasn't tree shaken, webpack is a module bundler, so it would scope your function if it weren't declared on the global scope (i.e. 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 that seems to correspond with your use-case.

Upvotes: 2

Related Questions