Differences

This shows you the differences between two versions of the page.

--- laravel-mix [2021/08/19 09:51] – chifek
+++ laravel-mix [2023/09/14 06:06] (current) – external edit 127.0.0.1
@@ Line 9: / Line 9: @@
 Это специальная надстройка над сборщиком Webpack являющиеся частью фреймворка Laravel
 Ранее этот инструмент носил название Elixir (Эликсир), который был отдельным плагином и требовал отдельной установки.
-На данных момент Laravel Mix доступен из коробки.
+На данных момент Laravel Mix доступен из коробки.
+Так же Laravel Mix можно использовать вне проекта Laravel. Ниже разберём установку и настройку Laravel Mix шаг за шагом
 ===== Установка =====
@@ Line 28: / Line 30: @@
 ''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]]