How can I use a function in a bundle.js file using <script> to include the bundle?

user_16313164 0
Viewed 498

I have a Javascript module called out.js

export default function out(str) {   
    //Some Code 
    console.log(str); 
}

I ran the webpack bundler and created a bundle.js file. And now I am Importing it to my index.html using a tag.

<!DOCTYPE html>
<html>
  <head><script defer src="bundle.js"></script></head>
  <body>
    <script>
      out("Hello")
    </script>
  </body>
</html>

But when I get the following error on the webpage.

index.html:6 Uncaught ReferenceError: out is not defined

I have tried named exports as well as default exports for the out.js, still I get the same error.

webpack bundler bundle javascript
1 Answers

You can find a good explanation and the answer here

With my little knowledge of javascript and webpack, I spent hours looking for an answer. The short answer is you need to define your function globally to use this way. You can make out global by adding this block outside of your function.

window.out = out;
user_39642170
Related