Для того чтобы настроить доступ к функции из HTML при использовании Webpack, вам понадобится выполнить несколько шагов.
1. Создайте файл index.js, в котором будет объявлена ваша функция или класс, к которым нужен доступ из HTML. Например:
// index.js
export function myFunction() {
console.log("Hello, world!");
}
2. В вашем HTML-файле добавьте тег script и укажите атрибут type со значением "module", чтобы указать, что скрипт использует модули JavaScript.
Затем в параметре src укажите путь к вашему файлу index.js вместе с путем к папке сборки вебпака. Например:
// index.html
<script type="module" src="dist/index.js"></script>
3. В корневой папке вашего проекта создайте файл webpack.config.js, в котором будет находиться конфигурация для Webpack. Например:
// webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist")
}
};
В данном примере мы указываем, что входной точкой является файл src/index.js, а собранные файлы будут сохранены в папке "dist" с именем "index.js".
4. Установите Webpack и необходимые плагины через npm, используя следующие команды:
npm install webpack --save-dev
npm install webpack-cli --save-dev
5. Запустите сборку проекта с помощью команды npx webpack, которая будет использовать конфигурацию из файла webpack.config.js. Теперь Webpack соберет файл index.js в папке dist.
После выполнения всех этих шагов, вы сможете использовать свою функцию myFunction или класс из файла index.js в вашем HTML-файле. Например:
// index.html
<script type="module" src="dist/index.js"></script>
<script type="module">
import { myFunction } from "./index.js";
myFunction();
</script>
Теперь при открытии вашего HTML-файла в браузере, вы должны увидеть сообщение "Hello, world!" в консоли разработчика. Обратите внимание, что поддержка модулей JavaScript вкдючена не во всех браузерах, поэтому для более широкой поддержки может потребоваться использование транспиляции кода с помощью Babel или использование других инструментов.