Webpack javascript not loading everythting

Questions
1

Hello,
I’m using Framework7 core with webpack, and have added all my js files to file “webpack.config.js”

module.exports = {
  mode: env,
  entry: {
    app: ['./src/js/app.js', './src/js/firebase.js', './src/js/djprayer.js', './src/js/chooseprayertime.js', './src/js/chooseprayertimev2.js', './src/js/time.js' ],
  },

but some of the scripts don’t work such as :

var d=new Date()
    var daynumber=new Array("0","1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th","14th","15th","16th","17th","18th","19th","20th","21st","22nd","23rd","24th","25th","26th","27th","28th","29th","30th","31st","32nd")
    var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
    var monthname=new Array("January","Febuary","March","April","May","June","July","August","September","October","November","December")
document.getElementById("full_date").innerHTML = weekday[d.getDay()] + ", "+daynumber[d.getDate()] + " "+monthname[d.getMonth()] + " "+d.getFullYear();





    var month;
    var day;
    var data_location;
    // Month change
    $("[name='id']").on('change', function (e) {
        month = $(this).val();
    });

// Day change
$("[name='day']").on('change', function (e) {
    day = $(this).val()
});

// All change
$("select").on("change",function(){
  // Set data_location only if both infos are present.
  if(typeof(month)!="undefined" && typeof(day)!="undefined"){
    data_location = month+day;
    console.log(data_location)
  }
});

function myFunction(){

    var database = firebase.database();
    database.ref().on('value', function(snapshot){
        if(snapshot.exists()){
            var content = "";
            snapshot.forEach(function(){
                var val = snapshot.child(data_location).val();

                    content +='';

                    content +="<tr> <th colspan='3'>Choosen Namaz - Salah Time</th> </tr>";

                    content += '<tr> <th rowspan="8">' + val.d_date + '</th> <th> Prayer </th> <th> Start </th> </tr>';

                    content += '<tr> <th>Salat Al-Fajr:</th> <td>' + val.fajr_begins + '</td> </tr>';

                    content += '<tr> <th>Sunrise:</th> <td>'           + val.sunrise + '</td> </tr>';

                    content += '<tr> <th>Salat Al-Ishraq:</th> <td>' + val.ishraq + '</td> </tr>';

                    content += '<tr> <th>Salat Al-Zuhur:</th> <td>'              + val.zuhr_begins + '</td> </tr>';

                    content += '<tr> <th>Salat Al-Asr:</th> <td>'           + val.asr_mithl + '</td> </tr>';

                    content += '<tr> <th>Salat Al-Magrib:</th> <td>'               + val.maghrib_begins + '</td> </tr>';

                    content += '<tr> <th>Salat Al-Isha:</th> <td>'               + val.isha_begins + '</td> </tr>';

                    content += '';
            });
            $('#prayer_timetable').append(content);
        }
    });

;}

errror message :

TypeError: document.getElementById(…) is null

ReferenceError: myFunction is not defined

When does the file get loaded on the pages? Do all pages get the js files ?

2

Why do you need so many entrypoints? Usually one is enough, use ES-modules instead and import those JS files/libraries/helpers in files/places where you need them https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

3

Fair point reduced them to one file, but still getting same error how would I import them to spefice pages?

do i type import file from ‘…/js/file.js’ in app.js?

how do i import that file in the page eg import js script/file to page catalog?