[Webpack, JSP] 빌드된 내용을 HTML 문서에 모두 삽입하는 방법

 

Webpack을 사용하는 주요 목적은 비동기 요청을 최소화함으로서 발생하는 지연시간 최소화입니다.

이는 모듈화된 파일을 번들링하여 하나의 파일로 병합하는 것을 의미합니다.

 

이렇게 함으로서 사용자는 물리적으로 서버에게 요청하고 응답 받는 횟수를 줄여 정적 리소스를 빠르게 다운로드할 수 있게 합니다, 이는 사용자 경험을 획기적으로 높일 수 있는 주요 방법 중 하나입니다.

(불필요한 요청과 동시 소켓 연결은 서버에 부담을 주고 성능을 저하시키는 주요 요인 중 하나입니다. 비동기로 요청한다 치더라도 서버는 여러 요청을 처리하기 위해 자원을 할당해야 하며, 불필요한 요청이 많아질수록 처리해야 할 작업량이 늘어나고 성능이 저하됩니다, 만약 그렇지 않더라도 사용자는 물리적으로 데이터가 서로 왕복하는 시간을 피할 수 없습니다, TCP의 경우는 헨드쉐이크 과정 때문에 이러한 문제점이 더 부각되어 보일 것입니다.)

 

하지만 여기서 한 단계 더 나아간다면 모든 정적 리소스들을 index.html로 모두 병합하여 사용자는 단 요청 한번으로 웹사이트를 모두 다운로드할 수 있게 하는 것입니다.

 

사실 이렇게 하기 위해서는 원래 별도의 Webpack 플러그인을 사용할 필요가 없었습니다만. 안정적인 빌드 환경과 기타 옵션을 위해서 제가 별도의 웹팩 플러그인을 개발하였습니다.

html-inline-webpack-plugin

 

별도의 플러그인을 사용하지 않고 구현하는 방법은 일단 기본적으로 Webpack을 사용한다면 별도의 세팅 없이 JSP 문법을 사용할 수 있습니다. 위 코드에서는 JSP에서 compilation.assets를 참조하여 빌드된 특정 경로의 파일 내용을 출력하고 있습니다 (참고: <%=는 출력입니다)

 

주의해야 할점은 webpack-dev-server 플러그인을 사용하여 빌드를 수행했다면 변경사항을 정상적으로 추적할 수 없으므로 별도로 이를 처리해야 합니다.

 

"scripts": {
    "release": "cross-env BUILD_TYPE=production && webpack",
    "debug": "cross-env BUILD_TYPE=development && webpack --watch",
    "dev": "cross-env BUILD_TYPE=development && webpack-dev-server --hot"
},

const isDebug = process.env.BUILD_TYPE.includes("dev");

new HtmlWebpackPlugin({
    ...
    // 디버그 상태일 때, CSS 또는 JS를 포함한 정적 리소스들이 인라인 형태로 문서에 병합되지 않고 변경 사항을 추적하기 위해
    // 별도로 클라이언트에서 비동기적으로 요청하도록 합니다.
    inject: isDebug,
    minify: false,
}),
new Webpack.DefinePlugin({"process.env.IS_DEBUG": isDebug})

 

이렇게 함으로서 디버그 모드에서만 HTML 문서에 스크립트와 CSS 파일같은 정적 리소스가 삽입되지 않게 설정할 수 있습니다.

 

사실 이런 방식을 사용하는 이유는 주로 성능 향상보단 서비스 워커(Service Worker) 구현을 용이하게 하기 위해 사용됩니다. (캐싱 관리를 편하게 하기 위해서)