webpack 의 MainTemplate.js 수정(?)

프론티어2017-02-08 21:18:36128320webpack, template

webpack 사용시 생성해 주는 output (주로 bundle.js 형태) 파일의 내용은
node_modules/webpack/lib 아래 MainTemplate.js 를 기반으로 합니다.

즉, MainTemplate.js 를 수정하면 달라진 output 을 얻을 수 있습니다.


이런 시도를 하게된 배경이 있습니다.

대개의 경우, bundle.js 는 한번 loading 되면, 그것으로 충분하죠. (하나의 app 처럼 동작하게 되죠)

  • 예: <script type="text/javascript" src="/js/app/app01.bundle.min.js">

그런데, app01, app02, app03, ... 와 같이 여러개의 app (또는 page) 가 있는 경우에는 어떻게 처리해야 할까요?
기본적으로는 각각을 loading 하는 js 를 포함하는 html 을 만들면 되겠죠


여기서 조금 접근을 다르게 해 보았습니다.

  • Navigation 을 포함한 메인 페이지내부에서,
  • app 영역을 하나 지정해 두고
  • Navigation 항목 산택에 따라서 app 영역의 내용을 변경하는 방식으로 구성하면
  • 화면 전개상의 성능은 최대한으로 만들수 있지 않을까?

자, 그럼 동적으로 app 용 bundle.js 를 loading 하면 되겠죠.
(물론, 이미 loading 된 bundle.js 를 제거하는 처리도 필요하겠죠)

  • app01.bundle.js 대신에 app02.bundle.js 를 loading 해 보면 원하는대로 동작을 합니다.
  • 그런데 다시 app01.bundle.js 를 loading 해 보면, 동작을 하지 않습니다.

이 지점에서 webpack 에서 만들어진 bundle.js 소스들을 살펴보게 되었습니다.


두번째 loading 시 실행이 되지 않았던 것은, 아래와 같이 되어 있기 때문입니다.
이미지

그래서 webpack 에서 이렇게 소스를 생성해 주는 부분을 추적해 보니
node_modules/webpack/lib 아래 MainTemplate.js 였습니다.

이미지


2017.2.11 추가

일단 MainTemplate.js 을 수정하는 webpack 으로 만들어진 모든 파일에 영향을 주게 되므로
다른 모듈들을 함께 설치하는 경우에 부작용일 발생할 수도 있습니다.

위의 생각대로 구현될 수 있도록 하기 위해서는 충분한 검토가 필요합니다.
시간을 갖고 풀어야할 숙제가 될 것 같네요.


webpack_require 를 window 레벨에서 인식하고, 처리할 수 있도록
window 변수로 연결하는 처리를 추가했습니다.
(수정한 파일은 mainTemplate.js 가 아니라 JsonMainTemplatePlugins.js 입니다.)

이미지

결과는 대략 다음과 같이 나옵니다
이미지
이미지

이중에 cache 에 해당하는 webpack_require.c 데이터를 지우면,
webpack_require.m 에 정의된 모듈들이 다시 호출(실행)되겠죠.

이 방식을 우선 검토해 볼 수 있을것 같습니다.

그러나,
webpack_require.m 모듈에 계속 쌓이는 모듈을 정리하는 부분은
계속 검토해야할 부분입니다.