목록webpack (6)

그럼에도 불구하고

[Bundler] 그래서 Webpack 있는데 Vite 왜 쓴다고? ( 번들러부터 익히기 )

요즘 추세를 보면 Webpack기반의 CRA보다 Vite를 많이 쓴다고 해요 "남들도 Vite 쓰니까~ 나도 Webpack 말고 Vite 써보자" 하고 썼던 나를 반성하는 글입니다. ( 최소한 이유는 알고 쓰자..ㅎㅎ ) 🧑🏻‍💻 번들러 ( Bundler) 번들러는 여러개의 파일들을 하나의 파일로 묶어주는 도구입니다. 번들러는 웹 개발에서 사용되는 도구 중 하나로, 웹 애플리케이션을 개발하거나 배포할 때 사용됩니다. 번들러의 주요 역할은 여러 개의 웹 리소스 파일, 예를 들면 JavaScript 파일이나 CSS 파일 그리고 이미지 파일 등을 하나의 번들(묶음)로 결합하고 최적화하는 것입니다. 이러한 작업을 통해 웹 애플리케이션의 성능을 향상하고 로딩 시간을 줄일 수 있습니다. 번들링을 하지 않는다면 매우..
이모저모/Bundler 2023. 10. 21. 00:08
[Webpack] 내 프로젝트에 적용시킨 webpack.config.js 공부

시작! 목차 📌 webpack.config.js HTML 삽입 미리보기할 수 없는 소스 ⭐️ 1. 모드 설정 mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있다. mode: "production", mode 값 설명 development 개발 모드 production 배포 모드 (기본 값) none 기본 최적화 옵션 설정 해제 "production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄일 수 있다. ⭐️ 2. 엔트리 설정 entry : 애플리케이션의 진입점 (entry point)를 설정한다. 나는 "main", "additional", "myClothes" 세 가지 엔트리 포인트를 정의하였다. 이는 각각에 해당하는 JavaScript 파일이 엔트..
이모저모/Bundler 2023. 6. 29. 23:41
[Vite] Vite란? ( 사용하면 리액트 10배 빨라짐 )

오늘은 Vite에 대해 알아보겠습니다. [ Vite란? ] Vite(비트)는 프랑스어로 '빠르다'라는 뜻을 가진 단어로, 차세대 프런트엔드 개발 도구입니다. 이름처럼 빌드와 개발 서버 구동 시간이 매우 빠릅니다. 기존에 자주 사용하던 webpack, rollup 등의 빌드 도구는 자바스크립트 언어로 만들어졌지만, Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 빌드 속도가 아주 빠릅니다. Webpack, Parcel등과 비교하면 10배 이상의 빠른 속도를 자랑합니다. ( 안쓸 이유가? ) 또한 개발 서버를 이용할 때도 아주 빠릅니다. 기존 webpack과 같은 모듈 번들러를 이용할 때는 모듈 번들링을 끝낸 후 개발 서버를 구동하므로 시간이 오..
이모저모/Bundler 2023. 6. 27. 22:18
[Webpack] 소스 맵(Source Map)이란?

[ 소스 맵 (Source Map) ] 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. [ 소스 맵 설정하기 ] 웹팩에서 소스 맵을 설정하는 방법은 아래와 같습니다. HTML 삽입 미리보기할 수 없는 소스 devtool 속성을 추가하고 소스 맵 설정 옵션 중 하나를 선택해 지정해주면 됩니다.
이모저모/Bundler 2023. 5. 20. 17:26
[Webpack] 웹팩의 4가지 주요 속성

오늘은 웹팩의 4가지 주요 속성에 대해 알아보겠습니다. 1. Entry 2. Output 3. Loader 4. Plugin [ Entry ] entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로입니다. HTML 삽입 미리보기할 수 없는 소스 위 코드는 웹팩을 실행했을 때 src 폴더 밑의 index.js를 대상으로 웹팩이 빌드를 수행하는 코드입니다. [ Entry 파일에 어떤 것이 들어가야 하는가 ] entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨 있어야 합니다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨 있어야 합니다. ..
이모저모/Bundler 2023. 5. 20. 15:38
[Webpack] Webpack이란?

Webpack에 대해 알아보겠습니다. [ Webpack ] Webpack이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원 (HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 그럼 모듈과 모듈 번들링에 대해서 조금 더 살펴보겠습니다. [ 모듈이란? ] 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // math.js function sum(a, b) { return a + b; } function substract(a, b) {..
이모저모/Bundler 2023. 5. 17. 20:16
이전 Prev 1 Next 다음