Webpack v2 #1 간단하게 살펴보기

Explanation

webpack3 버전이 릴리즈 된지도 어느덧 수개월이 지나 이미 4버전 알파가 올라오고 있는 시점이지만.. 아직 서비스 중인 프로젝트는 2버전을 사용하고 있어서 3, 4 버전을 알아보기 전에 2버전의 내용을 간단하게나마 정리해보려 합니다.
예제 코드: Github – falsy (예제 코드라고 할것도 없지만..)

1. 패키지 설정 및 설치

1-1. init

1-2. webpack 설치

2버전 마지막인 2.6.1 버전을 설치합니다.

1-3. 빌드를 테스트할 개발 서버 설치

1-4. html-webpack-plugin 플러그인 설치

1-5 예시

2. webpack 설정

2-1. index.html

2-2. index.js

2-3. webpack.config.js

3. npm 커맨드 수정 및 실행

3-1. package.json 수정

3-2. 개발 서버 실행

3-3. 빌드

4. webpack 설정들과 간단한 설명

4-1. entry, output

entry는 몇가지 형태로 존재하는데, 그 이해를 위해선 output도 함께 보는 것이 좋습니다.

4-2. devtool

압축, 난독화, es6+ 의 트랜스파일 등의 작업들로 어려워지는 디버깅을 소스맵을 통해 조금 수월하게 할 수 있는 옵션으로 이미 여러가지 옵션이 있으며 플러그인을 통해 더 확장되는 것으로 보입니다.
개인적으로는 angular1 + babel을 사용한 프로젝트에서 eval 이 포함되지 않는 옵션은 알 수 없는 오류가 발생해서 실험해보지 못하였으며, 단순히 결과적으로 배포를 위한 번들을 만듦에 있어, eval-source-map 에서 2.7mb 였던 번들의 크기가 eval에서 830kb 로 줄어드는 것을 알 수 있었습니다.

아직 옵션들 하나 하나의 정확한 차이는 알지못합니다..
이부분은 webpack v3(또는 v4) 버전의 글을 작성할때 추가하도록 하겠습니다.

4-3. module

예를 들어 위와 같이 설정한다면, es6 -> es5로 less는 css 트랜스파일 됩니다.

babel-loader, style-loader, css-loader, less-loader 는 추가로 설치해야 합니다

4-4. plugin

이름 그대로 플러그인을 설정합니다.
UglifyJsPlugin 플러그인은 자바스크립트 코드를 압축해줍니다.

5. 참고링크

검색을 통해 더 많은 글을 참고하였지만 그중에 좋았던 글들을 추려서 남깁니다. 감사합니다!
hyunseob.github.io
dev-momo.tistory.com
github:FEDevelopers
github:FEDevelopers
blog.jeonghwan.net

Leave a Reply