본문 바로가기
반응형

webpack28

6. Webpack의 핵심 개념 - 1 Webpack Entry와 Output 설정 Webpack은 모듈 번들러로서, 여러 개의 JavaScript 파일 및 다양한 모듈들을 하나의 파일로 묶어주는 역할을 합니다. 이를 위해 Webpack에서 가장 중요한 설정 중 하나가 'Entry'와 'Output'입니다. 이번 챕터에서는 이 두 가지 설정에 대해 자세히 알아보겠습니다. 1. Entry 설정 entry 설정은 Webpack이 어디에서부터 빌드를 시작할지를 지정하는 부분입니다. 주로 프로젝트의 진입점인 JavaScript 파일을 지정하게 됩니다. // webpack.config.js module.exports = { entry: './src/index.js', // 프로젝트 진입점 설정 // ... }; 위의 예제에서 ./src/index.js.. 2023. 12. 24.
2. Webpack 소개 - 2 Webpack의 역할과 필요성 웹 애플리케이션의 규모가 커지면서, 코드의 모듈화와 관리는 더욱 중요해졌습니다. Webpack은 이러한 상황에서 강력한 역할을 수행하여 여러 모듈 및 리소스를 효율적으로 관리하고 번들링합니다. 모듈 번들링 Webpack의 주된 역할 중 하나는 모듈 번들링입니다. 여러 개의 파일과 의존성을 하나로 묶어주어 웹 애플리케이션을 구성하는데 도움을 줍니다. 이는 각 모듈을 고유한 이름으로 관리하고 필요할 때 로딩하여 사용할 수 있게 해줍니다. 예를 들어, 자바스크립트 파일뿐만 아니라 CSS, 이미지, 폰트 등 모든 종류의 파일도 모듈로 취급하여 필요한 리소스를 효율적으로 관리할 수 있습니다. 로더 (Loaders) Webpack은 로더를 통해 다양한 파일 형식을 처리할 수 있습니다... 2023. 12. 24.
1. Webpack 소개 - 1 Webpack이란? 최근 웹 개발 환경에서는 복잡한 프로젝트 구조, 다양한 모듈 및 리소스 관리 등 다양한 요소들이 개발자들에게 다가왔습니다. 이에 따라 프론트엔드 빌드 도구의 필요성이 대두되었고, 그 중에서도 Webpack은 현대적인 웹 개발에서 필수적으로 사용되는 강력한 모듈 번들러입니다. Webpack의 역할 Webpack은 여러 모듈 및 리소스들을 하나로 묶어주는 번들링 도구입니다. 이는 여러 개의 파일 및 종속성들을 하나의 번들로 만들어주어 웹 애플리케이션의 성능 향상과 유지보수의 용이성을 제공합니다. 주요 역할은 다음과 같습니다: 번들링 (Bundling): 여러 파일 및 의존성을 하나의 번들로 만들어줍니다. 로더 (Loaders): 다양한 파일 형식을 웹 애플리케이션에서 사용할 수 있는 형태.. 2023. 12. 24.
24. 자바스크립트 개발 도구와 테스트-3 #3 빌드 도구와 CI/CD 빌드 도구와 CI/CD는 개발 프로세스에서 중요한 역할을 합니다. 빌드 도구는 소스 코드를 컴파일하고 패키지화하여 배포 가능한 상태로 만드는데 사용되고, CI/CD는 소스 코드 변경이 있을 때마다 자동으로 빌드, 테스트, 배포 등의 작업을 수행하여 개발과 배포 과정을 자동화합니다. 빌드 도구 1. Gulp Gulp는 자바스크립트 빌드 도구 중 가장 인기 있는 도구 중 하나입니다. Gulp는 플러그인을 사용하여 자동화된 작업을 수행합니다. 예를 들어, gulp-concat 플러그인은 파일을 병합하고, gulp-uglify 플러그인은 자바스크립트 코드를 압축합니다. Gulp의 장점은 빌드 태스크를 간단하게 작성할 수 있으며, 속도가 빠르다는 것입니다. // 예시: Gulp를 사용.. 2023. 3. 19.
반응형

티스토리툴바