Как пользоваться webpack в уже готовом PHP приложении?
Приветствую. Подскажите, есть готовое приложение на PHP, где на серврере гененрируется HTML, на клиенте ещё чуть чуть jquery аяксом погружает данные.
Потихоньку перехожу на vue js, но пользуюсь я уже скомпиленной версией с CDN. Так же с CDN можно подтянуть vuex, vue-ressource просто указав на них <script src="***"></script>
Но как при этом использовать другие библиотеки, которые ставятся только через NPM и для запуска требуют сборки, которые нельзя подключить с CDN. Как такое подружить уже с существующим приложением написанным на PHP?
Конечно была идея запилить клиентское одностраничное приложение, которое общалось бы чисто по API... Но пока это слишком трудозатратно и нерентабельно...
Сам в таком же положении — скоро буду вебпак ставить после переоса проекта...
Что нужно понять:
webpack — просо сборщик, генерирует примерно такой же файл, который тебе и нужно будет подключить в тот же шаблон, вместо CDN-версии... то есть управляемый состав, в отличие от CDN
npm-модули спокойно лежат в корне проекта в папке node_modules... свои файлы js пишешь в зависимости от структуры проекта — сам решаешь где... в конфиге вебпака просто подключаешь свои файлы... и генеришь их в файл в папку, куда сервер смотрит... и все
Еще раз:
1. Нужно получить из написанного кода результирующий скрипт через webpack
2. Нужно результирующий скрипт подключить в шаблон/layout (короче во view) Данный момент не отличается, что для полноценного сайта, что для SPA, и там и там получаешь скрипты для клиента
Да вебпаку в принципе не важно, что у вас там на бэкенде: CMS, фреймворк, кстомное решение, ему важно лишь наличие:
1) входных файлов
2) места куда выгрузить результат
3) конфиг, который опшите, что произйодет, пока файлы будут двигаться из 1 в 2
Если же вопрос именно как это оформить структурно, то тут зависит от собственных предпочтений и/или уже существующей структуры проекта.
На мой взгляд - легче сразу начать писать SPA. Ибо вы сначала будете допиливать PHP проект в связке с VueJS, а потом, когда захотите написать полноценное SPA - то придётся всё равно с нуля писать. Итог: Двойная, а то и тройная работа.
Далее, что я опишу - возможно не правильно, ибо я сам только начал учиться Vuejs в связке с PHP (Laravel).
1. Этап подключения NPM пакетов.
1.1. Инициализируем init. npm init
2. Подгружаем необходимые модули - webpack, необходимые библиотеки (аля vuejs и т.д.)
3. Переписываем код сайта для подключения VueJS.
4. Допиливаем некоторые части сайта, где необходимо использовать нужные нам модули (axios (лучше, чем vue-resource), vuex и т.п.)
Средний
Средний
Простой
