요구 사항은 간단합니다

WebpackHtmlWebpackPlugin을 사용하여 가지고 있는 템플릿에서 정적 HTML 파일을 생성하지만 때로는 충분하지 않다고 가정해 보겠습니다. 생성 중인 이 페이지는 SPA(단일 페이지 응용 프로그램)에 대한 기본 정적 페이지이며 처리된 번들, 버전 관리 등을 제외하고 전체 사이트와 관련된 다른 런타임 데이터, 예를 들어 일종의 클라이언트의 스크립트에 사용할 수 있어야 하는 구성(비밀이 아님, 금지됨).

도전

대부분의 경우 이러한 데이터는 위에서 언급한 구성과 같이 환경 구성에서 파생된 런타임 데이터이며 HtmlWebpackPlugin에서 사용하는 템플릿을 사용하면 빌드 타임 데이터를 주입할 수 있습니다. 이것은 이러한 목적을 위해 HtmlWebpackPlugin의 템플릿 주입을 사용하는 것이 현명하지 않다는(또는 경우에 따라 가능하지 않다는) 의미입니다. 그렇다면 어떻게 해야 할까요?

공통 솔루션

기본적으로 클라이언트에 제공될 문서에 런타임 데이터를 삽입하려고 할 때 런타임 템플릿 엔진을 사용합니다. 서버가 Node에서 실행되는 경우 좋은 옵션은 EJS 입니다. 서버는 기본 문서에 대한 요청을 받고, .ejs 템플릿 파일을 로드하고, 필요한 동적 런타임 데이터로 이를 렌더링한 다음 클라이언트에 반환합니다.
따라서 이론적으로 우리는 여기에서 3단계 -

.html 파일 대신 .ejs 파일을 생성하기 위해 HtmlWebpackPlugin 가져오기

요청 시 해당 .ejs 템플릿을 가져와 런타임 데이터로 렌더링합니다.

결과를 클라이언트에 반환

어떻게 해야 할까요?

.html 파일 대신 .ejs 파일을 생성하기 위해 HtmlWebpackPlugin 가져오기

이것은 매우 간단합니다. HtmlWebpackPlugin 구성에서 다음과 같이 원하는 결과를 정의하도록 합니다.

new HtmlWebpackPlugin({
    ...
    template: './index.template.html',
    filename: 'index.ejs',
}),

우리는 우리가 사용하고 있는 템플릿과 원하는 파일 이름을 선언합니다. 이제 빌드를 실행하면 index.template.html 파일에 따라 index.ejs 파일이 생성됩니다.

요청 시 해당 .ejs 템플릿을 가져와 런타임 데이터로 렌더링합니다.

이제 문서에 대한 호출을 받으면 다음을 수행합니다.

const doc = await ejs.renderFile('./dist/index.ejs', {conf:'chuck'}, {delimiter: '?'});
reply.send(doc);

여기에서 .ejs 템플릿을 가져 와서 현재 환경에 정의된 동적 런타임 데이터로 렌더링합니다(당신의 환경에서 그것을 정의하고 prod 및 dev 다른 구성을 유지하는 방법은 다른 이야기입니다. 자세히 알아보려면 , 주석에 언급).
이것은 이제 클라이언트에게 보낼 수 있는 문서를 생성합니다.

이제 내가 ejs 렌더러에 전달한 "delimiter"속성을 눈치채셨을 것입니다. 이것은 중요한 추가 사항입니다. ejs는 HtmlWebpackPlugin("%")과 동일한 기본 구분 기호를 사용하고 있으며 이 속성을 생략하면 HtmlWebpackPlugin이 빌드 시간에 다른 템플릿 엔진에 의해 런타임에만 사용할 수 있는 키를 보간하려고 시도하기 때문에 실패합니다. . 따라서 충돌이 발생하지 않도록 ejs에 다른 구분 기호를 사용합니다.

그게 다야. 질문이나 피드백에 대한 의견을 남겨주세요.

잘 지내세요!