WebPack 이란??

bicco2·2022년 11월 24일
0

webpack

웹팩에서는 자바스크립트, 스타일시트, 이미지 등 모든 것을 모듈로 본다.

브라우저 동작시 필요 js 파일들을 모두 가져오게 되는데

그렇게 되면 js 가 늘어날 수록 웹앱이 무거워진다. 즉 통신이 있을 때마다 소스를 로딩해야해 비용이 많이 든다.

이걸 해결하기 위한 도구가 bundler인데 필요 js 들을 묶어 하나의 js 파일을 로딩해 모든 js 파일들을 이용가능하게 만든 것을 말한다.
하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.

그 bundler의 도구 중 하나가 webPACK이다 (parcel도 있고)

== 모듈 번들링 (html에 들어가는 js파일을 하나로 만들어주는 것)

웹팩의 옵션중 하나인 babel이 있는데 이건 es6 → es5로 바꿔주는 역할을 한다.
그래서 보통 webpack이랑 babel은 항상 같이 쓰임

webpack.config.js

→ 설정 파일임

  • path : 파일의 경로를 다루고 변경하는 유틸리티
  • output : build(모듈을 하나로 묶는 과정) 결과를 저장할 경로
  • entry : entry 는 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점 이자 자바스크립트 파일 경로, build의 대상이 될 파일
  • Plug-In : build 된 bundle 파일을 동적으로 특정 html 페이지에 추가 할 수 있으며 build 시에 javscript, css, html 등의 파일을 난독화 및 압축을 진행,plugin 은 결과물의 형태를 바꾸는 역할

HMR

핫 모듈 리플레이스먼트(Hot Module Replacement - HMR)는 웹팩이 제공하는 가장 유용한 기능 중 하나입니다. 전체 새로고침 없이 모든 종류의 모듈들을 런타임 시점에 업데이트 되게 해줍니다

middleware?

webpack-dev-middleware는 웹팩으로 빌드한 정적파일을 처리하는 익스프레스 스타일 미들웨어다.

언제 webpack-dev-middleware를 사용할까?

프론트엔드 작업만 한다면 webpack-dev-server만으로도 개발 환경을 만들기에 충분하다. 하지만 프로젝트에 서버 코드가 들어 간다면 필요할지도 모른다.

사용 예 : 웹서버 코드와 함께 있을 경우

소스맵 설정

(컴파일된 소스를 원본 소스로 맵핑해 주는 역할 ,말그대로 원래 소스가 어디에 있는지 보여주는 지도)

앞서 웹 브라우저에서 결과를 확인했듯이 Sass를 사용해 스타일 모듈을 관리해도 번들링 되면 코드의 출처를 알 수 없어 스타일 디버깅이 어렵습니다. 이러한 문제를 해결하려면 소스 파일의 맵 파일을 생성해야 합니다. CSS, Sass 로더에 각각 sourceMap 설정 값을 true 로 설정하면 번들링 과정에서 소스맵을 만들어 스타일 디버깅 하기 쉽습니다.

→ 웹팩 좋긴한데 디버깅 문제가 있을 수 있나?

sass → css전처리기임

loder는 굉장히 중요함 > 로더에 어떻게 옵션을 잘 줘서 운영하는가에 따라 웹팩의 숙련도가 달라진다.
웹팩은 기본적으로 자바스크립트와 JSON 만 빌드할 수 있습니다. 자바스크립트가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성입니다.
loader 는 파일을 해석하고 변환하는 과정에 관여

css-loader → 물리적 css 파일을 읽어와서 webpack으로 가져오는 것을 실행함

style-loader → 그걸 받아서 웹브라우저의 웹페이지의 style 태그에 넣는 것을 실행함

⇒ 두 관계는 chaining 관계 얽혀있다.

profile
FE 개발자다?

0개의 댓글