Как компилировать Vue компоненты в разные JS/CSS файлы с помощью Webpack?

Question

[Игорь Дмитриев]

К примеру, имеется два vue компонента:

HomeComponent.vue
BlogComponent.vue

Требуется, чтобы при компиляции, Webpack разделял компоненты на разные файлы:

js/home.js
js/blog.js
css/home.css
css/blog.css

Кто сталкивался с данным вопросом, подскажите пожалуйста код для webpack.mix.js. Сейчас в нем стандартная компиляция в один файл:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Answer 1

[Roman K]

Изучай

Answer 2

[Сергей Ананьев]

А для чего такой подход? Компилить компоненты?!

Comments

[Игорь Дмитриев]

Чтобы определенная страница не загружала файл всего приложения, а только свою часть.

[Сергей Ананьев]

это ларавел, как я понимаю.
Тогда ты делаешь разные рут файлы, в которых подключаешь нужные тебе компоненты в инит new Vue
например
/resources/js/home.js
/resources/js/blog.js

в webpack.mix.js
mix.js('/resources/js/home.js',' public/js') и т.д.

так же ты можешь сделать и с css, css не обязательно писать прям в *.vue
просто отдельно собираешь

Посмотри как у тебя устроен по дефолту app.js и bootstrap.js

p.s. Все это такой себе подход, сэкономишь десяток кб, но при этом у тебя пользователь при каждом посещении страницы другого типа опять будет тянуть стили и скрипты с сервака. это экономия на спичках, а вот времени и сложности разработки прибаляет не мало.