[ 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을 결론짓는 글을 작성하겠습니다.

감사합니다.