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