Данный пакет нужно установить глобально, для того что бы можно было удобно управлять каждым проектом.
Для установки используйте команду:
npm i -g @wnp/cli
wnp init
Данная команда разворачивает wnp в текущую папку, и устанавливает нужные для работы зависимости.
wnp dev
Данная команда запускает webpack-dev-server, с текущим проектом, который будет доступен по адресу http://localhost:3000 по умолчанию.
wnp build
Данная команда компилирует весь проект в папку build, на выходе вы получаете html страницы, минифицированные css и js файлы, с map файлами для удобного дебагинга, и конечно же папку assets с контентом.
wnp add-component
Данная команда создаёт новую папку с компонентом по пути app/components, компонент состоит из трёх файлов:
А так же автоматически импортирует стилевой файл компонента в главный стилевой файл.
wnp add-page
Данная команда создаёт новую страницу (handlebars файл) по пути app/pages и регистрирует её в конфиг файл. Так же перезапускает webpack-dev-server, что бы webpack начал обрабатывать новую страницу.
wnp deploy
Данная команда публицирует вашу build папку в ваш репозиторий, на ветку gh-pages, если вы предварительно указали url вашего репозитория в файле package.json. Если вы не указывали адрес вашего репозитория, wnp попросит вас указать адрес и выполнит команду.
wnp help
Данная команда отображает список доступных команд.
Шаблонизатор handlebars обрабатывает файлы с расширением .hbs, в папках:
Компоненты импортируются посредством шорткода например:
{{> componentFolder/componentName}}
Если в папке app/components находится папка с компонентом test, то импортировать данный компонент можно в любой .hbs файл, посредством шорткода:
{{> test/test}}
Хелперы или помощники, помогают переиспользовать повторяющиеся куски кода, и могут быть импортированы в любой .hbs файл, посредством шорткода:
{{> helperName}}
Папку с хелперами - handlebars обрабатывает по пути app/core/helpers.
В любом из .hbs файлов вы можете вставить SVG иконку, посредством шорткода:
{{> icon src="iconName.svg" }}
Где iconName является названием SVG файла который вы хотите импортировать.
Расширение .svg обязательно, в противном случае webpack проигнорирует иконку и выведет её как простую картинку.
Иконки находятся по пути app/assets/icons.
Для картинок так же существует хелпер (шорткод) для того что бы вставить картинку в любой .hbs файл, достаточно импортировать его посредством шорткода:
{{> image src="imageName.ext" }}
Где imageName название файла и .ext расширение файла (png, jpg, svg, webp, и.т.д.)
Handlebars обрабатывает картинки по пути app/assets/images.
В wnp подключение фавиконок так же является хелпером. И менять что то в самом файле нет необходимости. Если вы хотите заменить фавиконку вашего проекта, воспользуйтесь сервисом Фавикон генератор
В стилевых файлах предусмотрены пути для использования картинок, иконок и шрифтов.
То есть, если вы хотите установить Background image на какой нибудь елемент в пути достаточно указать:
~images/imageName.ext