webpack

Webpack webpack아란 정적 모듈 번들러이다. 자바스크립트에서 모듈이란 js로 이루어진 작은 기능단위 코드를 지칭한다. 하지만, webpack은 js의 모듈뿐만 아니라 스타일시트,이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용한다. Core Con

webpack의 기본 개념을 알아봤다면 이번에는 webpack을 실습하면서 어떤 결과가 나오는지 알아볼것이다.실습한 내용은 김정환님의 프론트엔드 개발환경 이해이다.여기서 자주 사용하는 로더를 실습한다.style-loadercss-loaderfile-loaderurl-l

Plugin loader가 파일 단위로 처리하는 반면 plugin은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다. plugin은 arguments/options을 사용할 수 있으므로 webpack conf

Babel is a compiler (source code => output code). 바벨의 기본 동작 기본 동작을 코드로 설명하자면 const babel = code => code;이라 할 수 있다. 주어진 코드가지고 변환된 새로운 코드를 생성한다. 바벨은

live reloading 을 사용하기 위해 webpack과 함께 development server을 사용합니다.오직 development 용으로 사용되야 하며webpack-dev-middleware 를 사용하여 webpack assets에 대한 fast in-memo

웹팩에서 최적화는 mode 에 따라 다르게 적용되고 manual configuration하거나 overrides 방식으로 사용됩니다.따라서 development 와 production 에 대한 구성을 따로 파일로 만들어서 사용할 수 도 있습니다.이 부분은 다음 포스트