본문 바로가기
반응형

webpack31

7. Webpack의 핵심 개념 - 2 Webpack Loader: 모듈 변환의 핵심 Webpack은 다양한 자원(JavaScript, CSS, 이미지 등)을 모듈로 보고, 각 모듈에 맞게 변환해주는 기능을 수행합니다. 이를 가능하게 하는 것이 Loader입니다. Loader는 웹 애플리케이션을 구성하는 자원들을 가져와서 웹팩이 이해하고 처리할 수 있는 형태로 변환하는 역할을 합니다. 1. Loader의 역할 Loader는 크게 두 가지 주요 역할을 수행합니다. 1.1 변환 (Transformation) 자원을 가져와서 원하는 형태로 변환하는 작업을 수행합니다. 예를 들어, Babel Loader는 ECMAScript 2015+ 코드를 이전 버전의 JavaScript 코드로 변환해주는 역할을 합니다. 1.2 적용 (Application) 변환.. 2023. 12. 24.
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.
5. Webpack 설치와 설정 - 3 Webpack 기본 설정 파일 (webpack.config.js) 구성 Webpack을 사용하는 프로젝트에서 핵심적인 역할을 하는 것 중 하나는 webpack.config.js 파일을 통한 설정입니다. 이 파일은 Webpack에게 프로젝트를 빌드하는 방법을 알려주는 중요한 구성 파일입니다. 이번 챕터에서는 Webpack 기본 설정 파일을 구성하는 방법에 대해 알아보겠습니다. 1. webpack.config.js 파일 생성 프로젝트 루트 디렉토리에 webpack.config.js 파일을 생성합니다. // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', // 시작점(entry point) 설정.. 2023. 12. 24.
4. Webpack 설치와 설정 - 2 Webpack 전역 및 로컬 설치 Webpack은 모듈 번들러로, 여러 개의 파일을 하나로 묶어주고 최적화하는 도구입니다. 이번 챕터에서는 Webpack을 전역(Global) 및 로컬(Local)로 설치하는 방법에 대해 알아보겠습니다. 1. 전역(Global) 설치 Webpack을 전역으로 설치하면 커맨드 라인에서 어디서든 Webpack 명령어를 사용할 수 있습니다. 다음 명령어로 Webpack을 전역으로 설치합니다. npm install -g webpack 이렇게 하면 시스템 전체에서 Webpack을 사용할 수 있습니다. 설치가 완료되면 다음 명령어로 설치된 버전을 확인할 수 있습니다. webpack -v 2. 로컬(Local) 설치 일반적으로 프로젝트마다 Webpack 버전이 다를 수 있습니다. 따라.. 2023. 12. 24.
반응형

티스토리툴바