webpack static site generator

Générateur de sites statiques Webpack

Un plugin Webpack pour générer un site statique basé sur un ensemble de routes. Ceci a été écrit pour fonctionner avec un projet généré par la CLI Vue.js, car je n'avais pas de chance avec d'autres générateurs de sites statiques.

Installation

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

OU

yarn add webpack-static-site-generator -D

Usage

Dans 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'
    )
]

Le résultat ressemblera à ceci :

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

Comment ça marche

Une fois que Webpack a généré les actifs de votre site, ce plugin effectue les opérations suivantes :

1. Sert le répertoire de sortie spécifié en utilisant express
2. Charge chaque itinéraire fourni à l'aide de Nightmare
3. Enregistre le HTML de chaque route dans le système de fichiers

Utilisation sur Travis CI

Nightmare utilise Electron pour rendre les pages, et cela peut nécessiter une configuration supplémentaire sur les machines Linux, y compris Travis CI. Étant donné qu'Electron n'est pas entièrement sans tête, nous devons configurer xvfb (X Virtual Frame Buffer) pour donner à Electron un affichage virtuel qu'il peut utiliser pour le rendu. Ce plugin est déjà configuré pour nous xvfb en cas de besoin, il nous suffit de l'installer.

Ajoutez ce qui suit à votre .travis.yml :

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

Une configuration supplémentaire peut également être requise pour d'autres systèmes CI.

Problèmes?

Ce plugin n'a pas été testé de manière approfondie. Je l'utilise dans un projet CLI Vue.js, et cela fonctionne plutôt bien. Si vous rencontrez des problèmes, créez un problème et je verrai ce que je peux faire.