Header

[ WEBPACK 02 ] WebPack 환경구축

[ WEBPACK 02 ] WebPack 환경구축


안녕하세요. 코드부기입니다.

지난 시간에 이어 웹팩4에 대하여 설명해드리겠습니다.
이번시간은 babel-polyfill과 그 너머의 과정을 이어서 계속 진행하겠습니다.




[ babel-polyfill ]


Babel을 사용하여 ES6코드를 트랜스파일링을 해도 전부 ES5이하로 트랜스파일링이 되지 않습니다. 예를들어 Promise, Object.assign등의 기능은 ES5에 해당하는 기능이 없기 때문에 변환되지가 않습니다.

따라서 해결방법이 하나가 있는데

ES6+에서 새롭게 추가된 기능 ( 객체, 메서드 )를 사용하기 위해서는 
@babel/polyfill을 설치해야만 합니다.


다음을 설치하게 되면 package.json에 dependencies속성에 추가됩니다.


babel-polyfill은 개발환경 뿐만 아니라 실제 배포환경에서도 사용이 되어야하므로
--save-dev옵션을 주어서 dev-dependencies에 추가되지 않게 조심하여야 합니다.

그리고 파일 진입점에서 polyfill을 로드해야 합니다




다음 화면과 같이 진입점인 main.js에다가 import를 시켜주면 됩니다.


아니면 또 다른 방식이 존재하는데









다음과 같이 webpack.config.js인 웹팩 설정파일에 가서 직접 수정해서
polyfill을 반영할 수 있습니다.

그 후에 빌드하고 dist/js/bundle.js 을 확인하면 polyfill이 추가된 것을 확인할 수가 있습니다.


즉 이 과정을 자세히 살펴보면
entry에서 시작해서 webpack 설정파일안의 loader와 plugin을 통해 output으로 나오게 됩니다. entry의 파일들과 import와 require로 엮어진 모든 js모듈들을 하나 또는 소수의 파일로 번들링 시켜주는 과정을 WebPack이 수행하게 됩니다.

[ CSS 번들링 과정 ]

import, require로 css와 기타 이미지도 번들링이 가능합니다.


npm을 통해서 받은 모듈들은 각각의 역할들이 있습니다.
css-loader는 css 파일을 읽고 style-loader는 css 파일들을 style 태그로 만들어서 head 태그 안에 삽입시켜 줍니다.

그리고 mini-css-extract-plugin은 style태그 대신 css파일을 사용하고 싶을 때 사용하면 됩니다.


다음과 같이 작성하면 되는데 test는 css파일에 적용한다는 의미이고 여러 개의 로더를 사용하고 싶을 때는 use를 사용합니다. use대신에 loader를 사용해도 가능합니다.

다음 글에서는 WebPack을 결론짓는 글을 작성하겠습니다.

감사합니다.

댓글 쓰기

0 댓글