m2ndy 개발 블로그

React 프로젝트의 번들러로 Webpack을 사용하기 위해 공부한 내용을 정리해보았다.   1. webpack 설치npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin install 하게 되면 package.json, package-lock.json, node-modules가 생성된다 - html-webpack-plugin : Webpack의 플러그인 중 하나로, Webpack으로 번들링한 자바스크립트 파일을 자동으로 HTML 파일에 삽입해주는 역할을 한다. 이를 통해 수동으로 HTML 파일을 수정할 필요 없이, 번들링된 파일이 HTML 파일에 자동으로 포함되도록 할 수 있다. 1-1. scripts 추가// package...

✅ Webpack 이란?Javascript로 만든 어플리케이션을 위한 정적 모듈 번들러. 즉, 웹 어플리케이션을 구성하는 css, javascript, image 등의 웹 자원을 각각의 모듈로 간주한 뒤, 이들의 의존성 관계를 결합하여 하나의 결과물을 만들어주는 도구이다. Webpack은 프로젝트에서 필요한 모든 모듈을 매핑하고, 하나 또는 여러 개의 번들 파일로 결합하여 의존성 그래프를 생성한다. 이를 통해 웹 어플리케이션의 성능을 최적화하고, 모듈화를 통해 코드의 유지보수성을 높일 수 있다. 또한, 어플리케이션의 로드 시간을 줄이며, 사용하지 않는 코드를 제거하는 tree shaking을 통해 최종 번들 크기를 줄일 수 있다. webpack.config.js 파일을 통해 설정을 할 수 있으며, 진입점..