Project structure on Vue.JS. Is it mandatory to use Babel, Webpack?

Question

Vue.js

Hello.

I'm trying to figure out with Vue.JS . I read the documentation, everything seems to be clear, I like everything. I didn’t quite understand how best to organize the project structure, I found an article that describes creating an application on Vue.js with authentication and data transfer using RestAPI. And then I did not understand anything. What is Babel, Webpack, why use them and is it necessary? I have little experience in js, I always wrote code directly in javascript, without using additional goodies. Modules? Why can't you manually create directories and files?
Because I'm new to Vue.js, it only confuses me - it's not clear where Vue methods are used, and where babel. Share your experience, please. What to read on this topic? Preferably in Russian, but I also understand English (slowly but surely). Thank you.

UPD: The question about the architecture of the project on Vue.JS remains open.

Answer 1

What is Babel, Webpack, why use them and is it necessary?

babel is a translator of ES6+ (the current JS standard + the ability to add standards drafts) to javascript (ES5). That is, the ability to use the chips of the new standard in older browsers. On the one hand, it would be useful for a beginner to use it, since many things from the new standards greatly simplify the code. On the other hand, there is a risk of doing bad things due to inexperience. But this risk is always there.
webpack - bundler. It assembles modules into bundles (that is, not only JS, but also pictures can be inlined into styles, and those that are very large next to put well and all that). At the same time, it can destroy a lot of things and it’s really easier to live with it.
Modules have nothing to do with the directory structure. This is for encapsulation and isolation. Accept as an axiom that everything global is bad and should be avoided. Modules localize everything into local scopes. Well, managing dependencies becomes easier.
Google. The seeker shall be rewarded. All googling separately. And what's new in ES6, and about babel, and about webpack (well, here you can still separately webpack + babel).

Answer 2

babel is a translator from ES6 to ES5 , if you write in ES6, then yes, it is mandatory, because its support in browsers is far from complete
they are created manually and created ... webpack will collect them into one file