webpack static site generator

Generator Situs Statis Webpack

Plugin Webpack untuk menghasilkan situs statis berdasarkan serangkaian rute. Ini ditulis untuk bekerja dengan proyek yang dihasilkan oleh Vue.js CLI, karena saya tidak beruntung dengan generator situs statis lainnya.

Instalasi

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

ATAU

yarn add webpack-static-site-generator -D

Penggunaan

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

Outputnya akan terlihat seperti ini:

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

Bagaimana cara kerjanya

Setelah Webpack menghasilkan aset untuk situs Anda, plugin ini melakukan hal berikut:

1. Melayani direktori keluaran yang ditentukan menggunakan express
2. Memuat setiap rute yang disediakan menggunakan Nightmare
3. Menyimpan HTML setiap rute ke sistem file

Menggunakan pada Travis CI

Nightmare menggunakan Electron untuk merender halaman, dan mungkin memerlukan konfigurasi tambahan pada mesin linux, termasuk Travis CI. Karena Electron tidak sepenuhnya tanpa kepala, kita perlu menyiapkan xvfb (X Virtual Frame Buffer) agar Electron memiliki tampilan virtual yang dapat digunakan untuk rendering. Plugin ini sudah diset untuk kita xvfb bila diperlukan, kita tinggal menginstalnya saja.

Tambahkan yang berikut ke .travis.yml Anda :

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

Konfigurasi tambahan mungkin juga diperlukan untuk sistem CI lainnya.

Masalah?

Plugin ini belum diuji secara ekstensif. Saya menggunakannya dalam satu proyek Vue.js CLI, dan berfungsi dengan cukup baik. Jika Anda mengalami masalah, buatlah masalah dan saya akan lihat apa yang bisa saya lakukan.