[모듈번들링] Module Bundler: Webpack 도입 적용 경험 #1,2

도입 배경

 

기존 프로젝트 포함 현재 진행하고 있는 프로젝트 또한 보통의 js 모듈들을 로딩받아 사용하고 있다. 학부생때부터 번들링을 경험해본적이 없어서 그냥 당연하게 사용해왔고 사내에서 또한 그랬다. 

 

이번 프로젝트를 진행하면서 더욱이 번들링의 필요성을 느끼고 도입해 적용해 보았다. 

번들링을 함으로써 기대할 수 있는 효과는 다음과 같다.

1. <script>로 이어지는 코드의 간결화
2. 네트워크 코스트의 이점
3. 코드 난독화, 압축 등 여러 기능 제공

 

일단 script로 이어지는 지저분한 코드들이 파일들 마다 이루어지던 서버요청을 한번에 요청/응답을 받으므로 네트워크 코스트가 줄어들었다. 또한 하나하나 요청을 함에 따라 발생하는 js 요청 순서도 굉장히 중요했는데, 이로 인해 발생하는 버그를 방지할 수 있었다.

 

예를들어 Vue.js를 cdn으로 받으며 발생하는 렌더링 구성이 문제가 됬었는데 렌더링 이후 받아옴에 따라 보다 깔끔한 결과를 얻을 수 있었다.

 

두번째로는 코드의 난독화 이점이 있다. 여러 js 파일들이 직접 노출되 일일히 난독화 후 배포해야 하는 귀찮은(?) 문제가 있었는데, bundle로 묶여 전달되어 자동으로 난독화가 적용되어 편리한 강점이 있었다.  다만 이에 따라 디버깅도 불가했는데, 이는 좀더 찾아 적용해봐야겠다.

 

 

 

Webpack(웹팩)

 

<bundling>

 

여러 모듈번들링 툴을 검색하다 가장 인기있고, 다양한 기능을 제공하는 webpack을 적용하기로 하고 바로 테스트 적용을 했다. 다만  webpack을 적용하기 쉽게 보다 함수적으로 리팩토링 해줄 필요가 있다. 설정까지는 크게 어렵지 않아 하루정도 소요되었다.

 

기존 프로젝트가 Vue.js cdn을 받아 적용한 하나의 페이지이므로 Entry로 Vue 파일을 최상위 자바스크립트 파일로 설정하고 jQuery 레거시 js모듈들을 import 받아 사용했다.

 

일단 js만 번들링 했는데 만족스럽게 문제 없이 동작하는 것을 확인했다. 앞으로 css, html파일 번들링도 추가해서 테스트 해볼 예정이다. Loader, plugin은 조금 더 레퍼런스를 참조해서 도입하고자 한다.  

 

 

 

 

Setup

 

 

# global webpack,cli install
npm install webpack webpack-cli -g 
# webpack초기화세팅
npm init -y

1. 반드시 -g (전역)으로 설치

2. node가 설치 되어있어야 한다.

3. webpack.config.js 구성

const path = require('path');

module.exports = {
    entry: './src/appVue.js', // entry point
    output: {
        path: path.resolve(__dirname, 'dist'), //번들화된 파일 경로
        filename: 'bundle.js'
    },
    mode: 'development',
    watch: true //자동 번들화 작업 여부
};

 

p.s : 웹팩 디버깅

 

webpack- debugger

웹팩을 사용하면서 webpack.config.js의  Devtool을 정의하면 개발자도구에서 디버깅이 가능했다. 

본 목적은 번들링할때 소스맵을 구성하는 방식에 대한 정의인데, 이를 통해 기존의 문제점 이었던 번들링시 어느파일 어느 부분에서 문제가 생겼는지에 대한 디버깅이 불가능했던 점을 개선하고 방법을 찾을 수 있다.

devtool option으로 빌드프로세스 정의 (번들 소스 맵 생성 방법)

source-map	모든 기능이 포함된 완전한 소스맵을 별도의 파일로 생성한다. 이 옵션은 최고 품질의 소스맵을 생성하지만 빌드 프로세스가 느려진다. =>  디버깅에도 좋지만 빌드가 너무느림
cheap-module-source-map	별도의 파일에 컬럼 매핑을 제외한 소스 맵을 생성한다. 컬럼 매핑을 생략하면 빌드 속도는 향상되지만 디버깅할 때는 약간의 불편함이 있다. 브라우저 개발자 툴은 원래 소스 파일의 행만 가리킬 수 있으며, 특정 컬럼(또는 문자)을 가리킬 수 없다. 개인적으로 디버깅시 사용
eval-source-map	"eval"을 사용해 동일한 파일 안에 전체 소스맵과 소스코드 모듈을 중첩해 번들로 만든다.이 옵션을 사용하면 빌드 시간에 대한 부담 없이 모든 기능이 포함된 소스맵을 생성할 수 있지만자바스크립트를 실행할 때 성능과 보안이 저하되는 단점이 있다.즉, 개발 중에는 유용하지만 실무 버전을 빌드할 때는 사용하지 말아야 한다. ⇒ 중소규모 프로젝트 적정