Дмитрий Беляев

connection.query('SELECT * FROM menu', (err, result) => {
  if(err) {
    console.error(err);
    return;
  }
  const index = result.reduce((acc, row) => ({...acc, [row.id]: row}), {});
  const menu = [];
  for(const row of result) {
    if(row.parent_id === 0) {
      menu.push(row);
      continue;
    }
    const parent = index[row.parent_id];
    if(!parent) {
      console.warn(`Undefined parent with id ${row.parent_id}`);
      continue;
    }
    if(!parent.children) {
      parent.children = [];
    }
    parent.children.push(row);
  }
  console.log(menu);
});

Webpack создает изолированную область видимости для каждого модуля. Вам нужно вручную положить Ваш класс в глобальный объект:

class MyClass {
   constructor(){ this.init()}
   init () {}
}

// например вот так:
window.MyClass = MyClass;

Как и в обычном html, с помощью спец. символов

Без git (или другой vsc) нормально поработать с нескольких машин не выйдет

А так, кидаем node_modules, dist и прочие генерируемые и env-зависимые файлы и папки в .gitignore и прекрасно можно работать с любого количества машин с любыми ОС.
Я сам так работаю: Win10+WSL дома, osX на макбуке - походный вариант для работы из кафе/из такси, LMDE в офисе. И никаких проблем нет, если технология кросплатформенная, каковой нода и является.

P.S. как можно работать без git? а откатится как если что? а фичи по веткам раскидать, чтоб при необходимости хотфикса прод не сломался?

В данном случае файл отправляется в теле запроса как есть, без всяких оберток:

file_load.onsubmit = function(){
  var file = this.elements.myfile.files[0];
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "upload", true);
  xhr.send(file);
  return false;
}

Следовательно на сервере нам достаточно перенаправить тело запроса целиком в файл:

const server = require('http').createServer();
const fs = require('fs');
const nodeStatic = require('node-static');
const file = new nodeStatic.Server('.', {
  cache: 0
});

server.listen(3000, () => console.log("сервер запущен"));
server.on('request', (req, res) => {
  if (req.url == '/upload') {
    req.pipe(
      fs.createWriteStream('file2.jpg')
    ).on('finish', () => res.end('ok'));
    return;
  }
  file.serve(req, res);
});

function setRandomInterval(cb, minDelay, maxDelay, ...args) {
    let timeoutID;
    (function next() {
        const delay = Math.floor(Math.random() * (maxDelay - minDelay) + minDelay);
        timeoutID = setTimeout(() => {
            cb(...args);
            next();
        }, delay);
    })();
    return function cancel() {
        clearTimeout(timeoutID);
    };
}

// использование:
setRandomInterval(func, 500, 2500); // просто запускаем с интервалом от 0.5с до 2.5с
const cancelInteraval = setRandomInterval(() => {
    console.log('it work');
    if(Math.random() > 0.7) {
        cancelInteraval(); // таймаут можно отменить если вызвать возвращенную функцию
    }
}, 200, 500);
setRandomInterval((arg1, arg2, arg3) => {
    console.log(arg1, arg2, arg3);
}, 1000, 3000, 'arg1', 'arg2', 'arg3'); // подобно setTimeout и setInterval можно передать аргументы в колбэк

Хотя Сергей Горностаев уже предложил самый разумный ответ, просто замечу, что в последней версии VSCode есть удаленное редактирование через ssh
А кроме того есть CLI редакторы вроде vim

for(let  i = Math.sign(number) || 1; Math.abs(i) < Math.abs(number); i += Math.sign(number) || 1) {
  // ...
}

<div contenteditable ref="dataElem" />

props: ['value'],
mount() {
    this.$nextTick(() => {
        this.$refs.dataElem.innerHTML = this.value;
    });
},

Например так:

[1,2,3,1,2,3,4,0,-1].filter(function(el) {
  return !this.find(el2 => el === el2) && (this.push(el), true);
}, [])

Отрисовка на канвасе идет после загрузки изображения
А запрос на извлечение блоба идет до загрузки изображения и следовательно до отрисовки его на канвасе

parent.querySelectorAll('.gallery-uploads-imgs__item').forEach(element => {
          var img = new Image;
          img.src = element.dataset.src
          document.body.append(img)



          let canvas = document.createElement('canvas')
          let context = canvas.getContext('2d');
          canvas.width = img.clientWidth
          canvas.height = img.clientHeight


          img.onload = function() {
            context.drawImage(img, 0,0);
            img.remove();
            canvas.toBlob(function(blob) {
              let uploadImageUrl = URL.createObjectURL(blob);

              data.blobs.push( uploadImageUrl )

            }, 'image/png');
          }    
        })

P.S. вангую следующий вопрос будет в стиле data.blobs пустой...

И вообще какие еще варианты могут быть решения этой задачи? Кроме цикла for? Несмотря на то что в задании пишет именно с помощью него решить задачу. Просто для себя чтобы знать другие варианты.

document.getElementById('root').appendChild(
  document.createTextNode(
    Array.from(new Array(401), (_, i) => i).slice(4).join(' ')
  )
);

Сам webpack никаких портов не слушает, он просто собирает Ваше приложение из много файлов в мало файлов, сеть ему для этого не нужна.
Сеть может слушать webpack-dev-server, который просто является оберткой над express + webpack-dev-middleware.

Так что никто Вам не мешает самому запустить express и засунуть в него webpack-dev-middleware, получив тот же эффект + расширяемость express приложения

А при желании избавится и от express, Вам достаточно будет сэмулировать next колбэк и можете передавать в мидлвар нативные request и response из http модуля

import logBuilder from "./logs/logger";
const log = logBuilder(import.meta);

вот только в es-модулях нет предобъявленной переменной module, которая создается окружением commonjs модулей, но наверняка билдеру нужны метаданные, которые можно получить из import.meta