webpack static site generator

Webpack 정적 사이트 생성기

일련의 경로를 기반으로 정적 사이트를 생성하는 Webpack 플러그인입니다. 이것은 Vue.js CLI에 의해 생성된 프로젝트와 함께 작동하도록 작성되었습니다. 왜냐하면 다른 정적 사이트 생성기를 사용할 수 없었기 때문입니다.

설치

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. Express를 사용하여 지정된 출력 디렉터리를 제공합니다.
2. Nightmare를 사용하여 제공된 각 경로를 로드합니다.
3. 각 경로의 HTML을 파일 시스템에 저장합니다.

Travis CI에서 사용

Nightmare는 Electron을 사용하여 페이지를 렌더링하며 Travis CI를 포함한 Linux 시스템에서는 추가 구성이 필요할 수 있습니다. Electron은 완전히 헤드리스가 아니기 때문에 Electron에 렌더링에 사용할 수 있는 가상 디스플레이를 제공하려면 xvfb (X 가상 프레임 버퍼)를 설정해야 합니다. 이 플러그인은 필요할 때 이미 xvfb 로 설정되어 있으므로 설치하기만 하면 됩니다.

.travis.yml 에 다음을 추가하세요.

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

다른 CI 시스템에는 추가 구성이 필요할 수도 있습니다.

문제가 있나요?

이 플러그인은 광범위하게 테스트되지 않았습니다. 하나의 Vue.js CLI 프로젝트에서 사용하고 있는데 꽤 잘 작동합니다. 문제가 있는 경우 문제를 만들어 주시면 제가 무엇을 할 수 있는지 살펴보겠습니다.