webpack static site generator

Генератор статических сайтов Webpack

Плагин Webpack для создания статического сайта на основе набора маршрутов. Это было написано для работы с проектом, созданным с помощью CLI Vue.js, поскольку с другими генераторами статических сайтов мне не повезло.

Установка

npm i --save-dev webpack-static-site-generator

ИЛИ

yarn add webpack-static-site-generator -D

Использование

В webpack.conf.js :

 var StaticSiteGenerator = require ( 'webpack-static-site-generator' )

// Add the plugin to the plugin array
plugins: [
    new StaticSiteGenerator (
        // path to the output dir
        path . join ( __dirname , './dist' ) , 
        // array of routes to generate
        [ '/' . '/about' , '/blog' , '/blog/blog-post-1' ] ,
        // [OPTIONAL] element (in querySelector style) to wait for before rendering.
        // defaults to 'body'
        '.main-container'
    )
]

Вывод будет выглядеть примерно так:

 .
├── index.html
├── about
│   └── index.html
└── blog
    ├── blog-post-1
    │   └── index.html
    └── index.html

Как это работает

После того, как Webpack сгенерирует ресурсы для вашего сайта, этот плагин выполняет следующие действия:

1. Обслуживает указанный выходной каталог, используя экспресс
2. Загружает каждый предоставленный маршрут с помощью Nightmare.
3. Сохраняет HTML каждого маршрута в файловой системе.

Использование на Travis CI

Nightmare использует Electron для рендеринга страниц, и для этого может потребоваться дополнительная настройка на машинах с Linux, включая Travis CI. Поскольку Electron не является полностью безголовым, нам нужно настроить xvfb (X Virtual Frame Buffer), чтобы предоставить Electron виртуальный дисплей, который он может использовать для рендеринга. Этот плагин уже настроен для нас xvfb при необходимости, нам просто нужно его установить.

Добавьте в свой .travis.yml следующее:

 sudo : required
addons :
  apt :
    packages :
      - xvfb
      - libxss1

Для других систем CI также может потребоваться дополнительная настройка.

Проблемы?

Этот плагин не подвергался тщательному тестированию. Я использую его в одном проекте CLI Vue.js, и он работает довольно хорошо. Если у вас возникнут с этим проблемы, создайте проблему, и я посмотрю, что можно сделать.