본문 바로가기
반응형

webpack28

2. Vite란 무엇인가? - 2 Webpack 등 기존 번들러와 Vite의 차이점기존 번들러와 Vite의 가장 큰 차이점은 번들링의 방식과 개발 서버의 성능입니다. Webpack, Parcel과 같은 전통적인 번들러는 주로 모든 파일을 한 번에 묶어 번들링하고, 이를 클라이언트에게 제공하는 방식으로 동작합니다. 반면, Vite는 브라우저의 **ES 모듈(ESM)**을 적극 활용하여 필요한 파일만 그때그때 제공하는 방식을 채택하고 있습니다. 이 차이점은 특히 개발 환경에서의 서버 속도와 빌드 성능에서 큰 격차를 보입니다.1. 번들링 방식의 차이Webpack: 전체 번들링 방식Webpack은 모든 파일을 하나의 번들로 묶는 방식을 기본적으로 사용합니다. 즉, 프로젝트에 포함된 모든 파일을 **트리쉐이킹(tree-shaking)**과 같은 .. 2024. 10. 19.
31. 웹팩의 다양한 활용 사례 - 3 다양한 환경에서의 웹팩 사용 사례 웹팩(Webpack)은 모듈 번들러로서, 주로 프론트엔드 개발에서 자바스크립트, CSS, 이미지 등 다양한 리소스들을 효과적으로 관리하고 번들링하는 데 사용됩니다. 웹팩은 다양한 환경에서 활용될 수 있으며, 이 글에서는 몇 가지 다양한 사용 사례를 살펴보겠습니다. 1. 단일 페이지 어플리케이션(SPA) 웹팩은 SPA 개발에서 강력한 도구로 사용됩니다. SPA는 하나의 HTML 페이지로 구성되며, 동적으로 컨텐츠를 변경하고 업데이트하는데, 이때 웹팩은 여러 모듈을 번들링하여 필요한 자원을 최적화된 형태로 제공합니다. // webpack.config.js const path = require('path'); module.exports = { entry: './src/inde.. 2023. 12. 29.
30. 웹팩의 다양한 활용 사례 - 2 Webpack을 활용한 라이브러리 번들링 웹 개발에서는 종종 여러 라이브러리와 프레임워크를 사용해야 합니다. 이러한 라이브러리들을 효과적으로 관리하고 번들링하는 것은 프로젝트의 성능과 유지보수성을 높이는 데 중요합니다. Webpack은 이러한 작업을 간편하게 처리할 수 있는 도구 중 하나입니다. 이번 글에서는 Webpack을 사용하여 라이브러리를 번들링하는 방법에 대해 알아보겠습니다. 1. 라이브러리 설치 먼저 필요한 라이브러리를 프로젝트에 설치합니다. 예를 들어, lodash를 설치하고 사용해보겠습니다. npm install --save lodash 2. Webpack 설정 수정 Webpack 설정 파일(webpack.config.js)을 수정하여 라이브러리를 번들링할 수 있도록 합시다. // webp.. 2023. 12. 29.
29. 웹팩의 다양한 활용 사례 - 1 Webpack으로 웹 애플리케이션 빌드하기 웹 애플리케이션을 개발하고 배포하기 위해서는 여러 파일들을 효율적으로 관리하고 번들링하는 과정이 필요합니다. Webpack은 이러한 작업을 도와주는 강력한 도구 중 하나로, 프로젝트의 구조를 이해하고 최적화된 번들을 생성하는 데 사용됩니다. 이 글에서는 Webpack을 사용하여 웹 애플리케이션을 빌드하는 과정에 대해 살펴보겠습니다. 1. Webpack 설치하기 가장 먼저 프로젝트에 Webpack을 설치합니다. 다음 명령어를 사용하여 필요한 패키지를 설치합니다. npm install --save-dev webpack webpack-cli 2. 기본 구성 파일 생성 Webpack은 기본적으로 webpack.config.js 파일을 찾아 프로젝트를 빌드합니다. 이 파.. 2023. 12. 29.
반응형

티스토리툴바