• 2019-06-03 00:00:00
  • 771
  • 0
  • 6

Использование webpack для верстки. Подключение Pug

Использовать webpack для верстке многостраничных сайтов легко.

В текущей сборке уже готово:

  • Подключен babel7 - js код автоматический перегонится в старый стандарт и будет работать во всех браузерах
  • Весь js код автоматический поджимается
  • Подключен SASS (scss) с удобной настройкой под себя
  • По желанию можно использовать обычный css
  • autoprefixer - префиксы расставятся автоматический, css код будет валидным во всех браузерах
  • Все стили будут максимально поджаты с cssnano и mq-packer
  • Настроен livereload - авто обновление страницы при любых изменениях в js, css, html
  • Авто сплиты для js и css файлов
  • Подключен vue.js с удобной интеграцией шаблонов напрямубю в хтмл
  • Автоматический или ручной подхват html страниц
  • Константы для удобной конфигурации шаблона под себя

Webpack для верстки

Первый вариант - без использования шаблонизатора pug:

Первый шаг скачать текущую сборку - ссылка на прямое скачивание или репозиторий на GitHub

Далее следовать простым командам:

    // Установить все зависимости
    npm install
    // Запустить сервер для дев разработки (http://localhost:8081/)
    npm run dev
    // Команда для деплоя (папка на выходе будет как dist)
    npm run build

Более подробную инструкцию можно найти в README.md - ссылка здесь

Исходный код: https://github.com/vedees/webpack-template

Webpack 4 Подключение и настройка pug и pug-loader:

Для устновки pug и pug-loader в терминале:

    npm i pug pug-loader --save-dev

Далее нужно добавить обработчик для pug файлов:

       {
          test: /\.pug$/,
          loader: 'pug-loader'
        }

Обработка pug страниц:

Первое, что нужно сделать это указать, что будем обрабатывать и откуда брать pug файлы:

    const PAGES_DIR = `${PATHS.src}/pug/pages/`
    const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))

Далее есть два способа обработки. Первый способ - автоматическое добавление страниц:

        ...PAGES.map(page => new HtmlWebpackPlugin({
          template: `${PAGES_DIR}/${page}`,
          filename: `./${page.replace(/\.pug/,'.html')}`
        }))

Второй способ - ручной (можно легко связывать с первым способом) :

        new HtmlWebpackPlugin({
          template: `${PAGES_DIR}/about/index.pug`,
          filename: './about/index.html',
          inject: true
        }),
        new HtmlWebpackPlugin({
          template: `${PAGES_DIR}/about/portfolio.pug`,
          filename: './about/portfolio.html',
          inject: true
        })

В пример привел страницы индекс и абаут из директории about.

Теперь осталось создать страницы для пага, а также главные лаяуты с инклюдами.
Все ваши вопросы есть в ридми, но если вы не найдете свой вопрос то можете задать его здесь или на ютубе!

Весь исходный код: - https://github.com/vedees/webpack-template-pug