How to understand the work of js assemblers, transpilers etc?

Question

JavaScript

There are situations when the assembly of the application collapses due to some kind of magic and this needs to be debugged.
Debugging turns into attempts to write console.log inside the falling code and analyze the data.
The lack of knowledge in the work of assemblers affects, I want to ask the advice of smart people and mb someone knows good materials on the topic (or dig into the source codes?)
I’m interested in how babel, webpack, various boilerplates work, whether it’s vue-create-app or react-create- app
let's say where to find, how are the presets for Babel overridden? vue-create-app how to use one config for main app and include another for jest.
how to find bottlenecks in build speed and optimize? found special plugins for webpack
everything looks like a huge collection of various tools,
I found a cool course from Ilya Kantor on webpack, now I can set it up, but I can’t explain how it works.
I would like to systematize knowledge so that JS ceases to be a black box.
Can you tell me where to dig or where to start
Thank you in advance

Answer 1

There are not so many reasons for the crash of the assemblers themselves.
Most often, this is the incompatibility of the versions of the packages used. For example, the third gallp does not want to run under the fourteenth node. The way out is to upgrade to the fourth gallp or roll back the node on the computer to 8 (or 12, I don’t remember already).
Node-sass sometimes crashes with a binary incompatibility error. Just rebuilding the binary.
Yesterday vue-cli fell off (haven't used it for a long time). I didn't even try to figure out why, I just did npm i -g @vue/cli and it worked. Again, there was something with the versions.
Well, etc.
And information about setting up packages is always available on their official websites or in github repositories. It's easy enough to read.