I'm facing an issue, the goal I want to achieve is call a function from a webpack file.

I've followed this question and I can do it in the same way as the accepted answer. Using the tag <script> in the HTML and window.onload. But I want to call my function from a.js file.

So I want something like this:

1. The HTML calls a JS script file.
2. JS script import function from webpack-ed JS.
3. webpacked function is executed.

The tree folder is like this:

|
|-> index.html
|-> index.js       --> From here I want to call function packed
|-> lib
     |
     |-> main.js   --> webpacked file

My webpack.config.js is

module.exports = {
  // ...
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'lib'),
    libraryTarget: 'var',
    library: 'MyLibrary'
  },
};

The file I'm packing is a TS file which has a function like this:

export function test(){
    console.log("test")
}

Then in the HTML I call the JS file:

<script type="module" src="./index.js"></script>

And into index.js I do the import:

import MyLibrary from './lib/main.js';

// here I want to do MyLibrary.test()

But it throws an error:

Uncaught SyntaxError: import not found: default

Also I've tried:

import {test} from './lib/main.js';

Or adding default in the TS file.

export default function test(){
    console.log("test")
}

// or

function test() { ... }
export {test as default};

But, as I've said before, adding this into the HTML works:

<script src="./lib/main.js"></script>
<script>
window.onload = function () {
    MyLibrary.test();
};
</script>

But I want to have the function in a JS file.

I've found a similar question but the answer don't work for me.

Thanks in advance