[Webpack] 생활 코딩 정리웹팩 사용해보기

마음 같아서는... 하나하나 깊게 공부하고 싶었는데 주말이란 시간이 참 빠른 것 같다...

급하게 강의들으면서 간단하게 정리를 해본다...!

 

웹팩을 사용하게 되면

파일을 하나로 묶어서 웹브라우저 로딩시 컴퓨터 커넥트를 줄여 속도를 빠르게 개선할 수 있고

예전 버전까지 모듈기능이 잘 구현될수록 있도록 자동으로 컴파일해준다.

 

그래서 ESM(export, import)은 최신 브라우저에서만 작동하는데

이것 또한 예전 브라우저에서도 잘 작동할 수 있도록 컴파일해주기 때문에 바벨 없이 사용 가능!

 

npm init

package.json 파일이 생기면서 프로젝트에 대한 여러가지 설명이 들어간다.

 

엔트리 파일

index.js 파일에 모든 js파일들을 import 해놓음.

그리고 이 파일을 번들링 시킴.

 

npx webpack --entry ./source/index.js --output ./public/index_bundle.js

이렇게 entry파일과, 번들링 파일을 어디다가 output할지 경로를 설정해줌.

 

웹팩 설정파일(configuration)

webpack.config.js 파일에

entry ,output 설정 가능함.

 

로더(Loader)

로더를 얼마나 많이 알고있는가가 중요함. 

png, css까지 모두 한 파일로 번들링 시켜줄 수 있다.

즉 가공 공정이라고 볼 수 있는데 웹팩 공식 사이트에서 잘 확인할 수 있다.

 

※ 주의 : 뒤쪽에 있는 로더가 먼저 실행됨.

 

• css-loader : 확장자가 css인 파일을 만나면 웹팩이 이 파일들을 웹팩 안으로 로드시켜준다.

index.js에 css파일을 import한다.

그러면 엔트리파일에 있는 모든것들이 번들링된다.

 

• style-loader : 그렇게 번들링 파일로 가져온 css코드를 웹페이지 안에 스타일태그로 주입해주는 로더.

 

output.filename

여러 각지 번들파일로도 만들어낼수있다.

 

npx webpack --watch

웹팩이 자동으로 변화를 감지하고 번들링 해준다.

 

devserver

• 개발할때 사용할수있는 웹서버
• live reload
• 또한 hot module replacement를 지원

 

code splitting /  lazy loading

한번에 번들링 한 파일이 너무 클때 그것을 쪼개서 나눠쓸수 있음.

 

 

 

참고 감사합니다 :)

 

webpack