Как получить доступ к функциям из пакета веб-пакета

Question

Я новичок в вебпаке. Я пытаюсь получить доступ к функции со страницы HTML. Проблема у меня в том, что функция не определена. Я просмотрел несколько постов, у которых были схожие проблемы, но ни одна из них не работала.

main.js

let myFunctions = require('./file1.js')
myFunctions.func1();

module.exports = {
  myFunctions: myFunctions,
};

file1.js

function func1() {
  console.log('This is func1');
}

function func2() {
  console.log('This is func2');
}

module.exports = {
  func1: func1,
  func2, func2
}

index.html

<button onclick="func1()">PRESS ME!</button>

Я хочу иметь возможность доступа к функциям и переменным со своей html-страницы, но постоянно получаю сообщение об ошибке «ReferenceError: func1 notfined».

Если я напишу свой код таким образом, он будет работать

main.js

let myFunctions = require('./navbar.js')
window.myFunctions = myFunctions;

однако Кто-то на одном из постов, похожих на этот, сказал, что делать это не будетработать, если веб-сайт размещен на сервере ??

Как мне получить доступ к переменной со своей html-страницы и почему я не могу просто определить свои функции следующим образом.

function func1() {
  console.log('This is func1');
}