Тонкости webpack или неправильное использование import export

Question

Всем доброго времени суток. Начал с нуля изучения webpack-а. Очень сложно дается. Параллельно пытаюсь сажать свой тестовый проект на webpack. Появилась первая проблема, которую не понимаю как решить.
Установил глобально вебпак (npm install -D webpack webpack-cli). Поставил плагины html-webpuck-plugin и clean-webpuck-plugin.

Основной js файл, пока что, разбил на 2. filters.js и main.js. Вебпаку прописал точку входа main.js. В модуле filters.js сделал export, в main.js сделал import. Обработчики событий для фильтров работают, однако async function для получения тестовых моков is not defined. Хотя после импорта фильтров я объявил эту функцию.
В выходном файле после обработки вебпаком она присутствует, не могу понять в чем проблема. Приложу несколько скринов и куски кода, т.к. думаю по описанию понять будет очень трудно)

//package.json
{
  "name": "testprojectbears",
  "version": "1.0.0",
  "description": "Bears Project",
  "main": "index.js",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "Mike Vazovski",
  "license": "ISC"
}

//webpack.config.json

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    entry: {
        main: './src/js/main.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ]
}

//filters.js
function filterDrop(){
    const checkBox = document.querySelector('.requests__checkbox')
    checkBox.addEventListener('click', () => {
        document.querySelector('.requests__checkmark').classList.toggle('requests__checkmark--active')
        checkBox.classList.toggle('requests__checkbox--active')
    })
}

function filterContentDrop() {
    const dropDownButton = document.querySelector('.requests__filter');
    dropDownButton.addEventListener('click', () => {
        document.querySelector('.requests__filter-content')
            .classList.toggle('requests__filter-content--active');
        document.querySelector('.requests__button-arrow')
            .classList.toggle('requests__button-arrow--active')
    })
}

export {filterDrop,filterContentDrop}

//main.js

import {filterDrop,filterContentDrop} from './filters'

filterDrop();
filterContentDrop();

let bearsArr;
async function getBearsData(url){
    const response = await fetch(url)
    const datas = await response.json()
    bearsArr = datas.results.data
}

Как итог getBearsData is not defined. Никак не могу понять почему, если в main.js я ее объявил, через webpack прошел main.js и в выходном файле она присутствует. Подскажите, пожалуйста, люди знающие) Не кидайтесь тапками, только начал изучение и сложно дается :)

БЛОГ НА HUSL

Тонкости webpack или неправильное использование import export

Ответы (0 шт):