How not to get confused in Vue + Webpack?

Question

Frontend

I am doing a project. Backend - KeystoneJS, frontend - Vue.js (I want to learn). But the more I read the docs, the more I get confused about the Vue ecosystem. All these loaders, builders and so on. Well, I didn’t deal with webpack (I use gulp the old fashioned way).
Help me get comfortable, dear gurus!
I don’t want any boilerplates, because there is too much heaped up there. I understood the basic logic of building an application on Vue. I would like to assemble components with the following structure:

├── App.vue
├── components
│   ├── index.js
│   └── main
│       ├── main.vue
│       ├── scripts
│       │   └── index.js
│       ├── styles
│       │   └── index.less
│       └── templates
│           └── index.pug
├── main.js
└── router
    └── index.js

Contents of components/main.vue:

<template src="./templates/index.pug" lang="jade"></template>
<script src="./scripts/index.js"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style src="./styles/index.less" lang="less" scoped></style>

main.js content:

import Vue from 'vue';
import * as Components from './components';
import App from './App';
import router from './router';

const components = Object.assign( {}, Components, {
    App
} );

new Vue( {
    el: '#App',
    router,
    template: '<App/>',
    components: components
} );

How can I assemble this into a bundle using webpack?

Answer 1

https://laracasts.com/series/learn-vue-2-step-by-step