Компиляция ресурсов

Компиляция ресурсов с использовLaravel Mix)

Установка и настройка

Когда вы создаете новый модуль, он также создает активы для CSS/JS и файл конфигурации webpack.mix.js

php artisan module:make Blog

Смените директорию на модуль

cd Modules/Blog

Файл package.json по умолчанию включает в себя все, что вам нужно для начала работы. Вы можете установить зависимости, на которые он ссылается, запустив

npm install

Запуск Mix

Mix — это слой конфигурации поверх Webpack, поэтому для запуска задач Mix вам нужно всего лишь выполнить один из сценариев NPM, включенных в laravel-modules package.json по умолчанию

// Запуск всех задач Mix...
npm run dev

// Запуск всех задач Mix и сжатие результата...
npm run production

После генерации вы не будете знать точное имя файла. Таким образом, вы должны использовать функцию глобального микширования Laravel в своих представлениях для загрузки ассета с соответствующим хешированием. Функция микширования автоматически определит текущее имя хешированного файла

// Файл Modules/Blog/Resources/views/layouts/master.blade.php

<link rel="stylesheet" href="{{ mix('css/blog.css') }}">

<script src="{{ mix('js/blog.js') }}"></script>

Для получения дополнительной информации о Laravel Mix просмотрите документацию здесь: https://laravel.com/docs/mix

Примечание: чтобы основная конфигурация Laravel Mix не перезаписывала файл public/mix-manifest.json:

Установитеlaravel-mix-merge-manifest

npm install laravel-mix-merge-manifest --save-dev

Измените основной файл webpack.mix.js:

let mix = require('laravel-mix');


/* Allow multiple Laravel Mix applications*/
require('laravel-mix-merge-manifest');
mix.mergeManifest();
/*----------------------------------------*/

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