webpack static site generator

Statischer Webpack-Site-Generator

Ein Webpack-Plugin zum Generieren einer statischen Site basierend auf einer Reihe von Routen. Dies wurde geschrieben, um mit einem von der Vue.js-CLI generierten Projekt zu arbeiten, da ich mit anderen statischen Site-Generatoren kein Glück hatte.

Installation

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

ODER

yarn add webpack-static-site-generator -D

Verwendung

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

Die Ausgabe sieht etwa so aus:

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

Wie es funktioniert

Nachdem Webpack die Assets für Ihre Site generiert hat, führt dieses Plugin Folgendes aus:

1. Stellt das angegebene Ausgabeverzeichnis mit Express bereit
2. Lädt jede bereitgestellte Route mit Nightmare
3. Speichert den HTML-Code jeder Route im Dateisystem

Verwendung auf Travis CI

Nightmare verwendet Electron zum Rendern der Seiten und erfordert möglicherweise eine zusätzliche Konfiguration auf Linux-Rechnern, einschließlich Travis CI. Da Electron nicht vollständig Headless ist, müssen wir xvfb (X Virtual Frame Buffer) einrichten, um Electron eine virtuelle Anzeige zu geben, die es zum Rendern verwenden kann. Dieses Plugin ist bei Bedarf bereits für uns xvfb eingerichtet, wir müssen es nur noch installieren.

Fügen Sie Folgendes zu Ihrer .travis.yml hinzu:

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

Für andere CI-Systeme kann auch eine zusätzliche Konfiguration erforderlich sein.

Probleme?

Dieses Plugin wurde nicht ausführlich getestet. Ich verwende es in einem Vue.js-CLI-Projekt und es funktioniert recht gut. Wenn Sie Probleme damit haben, erstellen Sie ein Problem und ich werde sehen, was ich tun kann.