Использование webpack для верстки. Подключение Pug
  • 2019-06-03
  • 3
  • 0

Использование 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