====== Что такое Laravel Mix? ======

Офф.сайт [[https://laravel-mix.com]]


{{:ccbecb77ee.jpg?600|}}


Это специальная надстройка над сборщиком Webpack являющиеся частью фреймворка Laravel
Ранее этот инструмент носил название Elixir (Эликсир), который был отдельным плагином и требовал отдельной установки.

На данных момент Laravel Mix доступен из коробки.

Так же Laravel Mix можно использовать вне проекта Laravel. Ниже разберём установку и настройку Laravel Mix шаг за шагом

===== Установка =====


В пустой каталог инициализируем npm

''npm init -y''


Далее устанавливаем сам Laravel Mix

''npm install laravel-mix --save-dev''

Затем создаем в корне проекта файл webpack.mix.js

''touch webpack.mix.js''

и помещаем туда след.код:


<code>

// подключение laravel-mix
let mix = require('laravel-mix');

// настройка для нативного JS
// mix.js('src/js/app.js', 'js');

// настройка для VueJS
mix.js('src/js/app.js', 'js').vue();

// настройка для CSS файла
// mix.css('src/css/main.css', 'css');

// настройка для SCSS файла
mix.sass('src/sass/app.scss', 'css');

// Настройка директории, в данный момент помещает в папку dist
mix.setPublicPath('dist');


</code>



По итогу у вас должна быть структура след.:


{{:81efc3a35e.jpg?600|}}


===== Запускаем сборку в dev mode =====

''npx mix''

Чтобы постоянно не перезапускать сборку, есть команда, которая будет отслеживать ваши изменения:

''npx mix watch''


и открываем файл index.html через браузер

Если вы сделали все правильно, то у вас должны отображаться ваши изменения

===== Запускаем сборку в production mode =====

''npx mix --production''


Чтобы постоянно не перезапускать сборку, есть команда, которая будет отслеживать ваши изменения:

''npx mix watch''


===== Ссылки  =====

Этот проект на Github [[https://github.com/Chifek/laravel-mix]]

Офф.сайт Laravel Mix [[https://laravel-mix.com]]