Делаю проект. Бэкенд - 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?
Простой
