Как не запутаться в Vue+Webpack?

Question

[Леха Ярков]

Делаю проект. Бэкенд - KeystoneJS, фронтенд - Vue.js (хочу освоить). Но чем больше читаю доки, тем больше путаюсь в экосистеме Vue. Все вот эти вот лоадеры, билдеры и прочее. Ну и с webpack дела не имел (юзаю gulp по старинке).
Помогите освоиться, уважаемые гуру!
Всякие бойлерплэйты не хочу, ибо слишком много там наворочено. Я основную логику построения приложения на Vue понял. Мне бы собирать компоненты с такой структурой:

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

Содержимое 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:

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
} );

Как мне вот это вот собрать в бандл с помощью webpack?

Answer 1

[pantagruel964]

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