Table of Contents
Что такое Laravel Mix?
Офф.сайт https://laravel-mix.com
Это специальная надстройка над сборщиком 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
и помещаем туда след.код:
// подключение 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');
По итогу у вас должна быть структура след.:
Запускаем сборку в 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