Frontend/Webpack 검색 결과

2 개의 검색 결과가 있습니다.

Frontend/Webpack

[Webpack] 웹팩의 주요 속성 (Entry, Output, Loaders, Plugins, Mode)

🌈 웹팩(Webpack) 의 주요 속성 웹팩의 빌드(파일 변환) 과정을 이해하기 위해서는 아래 다섯 가지 주요 속성에 대해서 알고 있어야 한다. Entry : 웹 자원의 변환을 위한 진입점(→ 자바스크립트 파일의 경로) Output : 웹팩의 번들링된 결과물이 위치하게 될 파일의 경로 Ioader : 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 것들을 변환할 수 있도록 도와주는 속성 Plugin : 웹팩의 기본 동작에 추가적인 기능을 제공하는 속성 Mode : 웹팩의 실행 방법을 결정하는 속성 0️⃣ webpack.config.js webpack.config.js 은 Webpack이 실행될 때 참조하는 설정 파일이다. 사실 웹팩을 사용할 때 설정 파일이 반드시 필요한것은 아니다. 하지만, 설정 ..

2022. 7. 4. 12:20

Frontend/Webpack

[Webpack] 웹팩(Webpack)의 개념

> 관련글 :: [Webpack] 자바스크립트 모듈화의 역사 🌈 웹팩(Webpack) 의 개념 웹팩은 오픈소스 자바스크립트 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. 웹사이트에 접속하여 크롬의 개발자 모드를 통해 네트워크를 확인하면 위와 같이 여러 타입으로 구성된 많은 리소스 파일이 있다. 사이트의 로딩이 완료되었을 때 해당 리소스들이 모두 다운로드되며, 많은 파일의 다운로드는 웹 로딩의 속도 저하로 이어질 수 있다. 이러한 이슈를 해결하기 위해 등장한 것이 번들러이며, 번들러 중 가장 많이 사용되는 도구 중 하나가 웹팩이다. 🎁 웹팩(W..

2022. 5. 12. 12:38