본문 바로가기
반응형

webpack31

23. Webpack Dev Server와 핫 모듈 리플레이스먼트(HMR) - 2 HMR의 장점과 적용 방법 1. HMR이란? 핫 모듈 리플레이스먼트(Hot Module Replacement, HMR)는 개발 중인 애플리케이션의 일부를 교체하는 기술로, 코드 변경을 감지하고 새로운 모듈로 교체함으로써 애플리케이션을 다시 빌드하지 않고도 변경 사항을 실시간으로 반영할 수 있습니다. 2. HMR의 장점 2.1 실시간 반영 HMR을 사용하면 코드 수정 후 브라우저를 새로 고치지 않아도 변경 사항이 즉시 반영됩니다. 이는 빠른 개발 속도와 효율적인 작업을 가능하게 합니다. 2.2 상태 유지 애플리케이션의 상태는 유지되므로, 변경된 부분만 교체되고 나머지는 그대로 유지됩니다. 이는 애플리케이션의 상태를 잃지 않고 개발자가 현재 작업 중인 상태에서 계속 작업할 수 있음을 의미합니다. 2.3 에러.. 2023. 12. 29.
22. Webpack Dev Server와 핫 모듈 리플레이스먼트(HMR) - 1 개발 서버 설정과 활용 웹팩에서 제공하는 개발 서버는 손쉽게 프로젝트를 개발할 수 있도록 도와주는 강력한 도구입니다. 이 글에서는 웹팩 개발 서버의 설정과 활용 방법에 대해 알아보겠습니다. 1. 개발 서버란? 웹팩 개발 서버는 소스 코드를 실시간으로 감시하고, 변경이 감지되면 빠르게 빌드하여 브라우저에 반영해주는 도구입니다. 이는 코드 수정 시 매번 수동으로 빌드하지 않아도 되어 효율적인 개발을 가능하게 합니다. 2. 설치 웹팩 개발 서버는 npm을 통해 간단히 설치할 수 있습니다. npm install --save-dev webpack-dev-server 3. 기본 설정 웹팩 설정 파일(webpack.config.js)에서 개발 서버를 설정할 수 있습니다. // webpack.config.js cons.. 2023. 12. 29.
21. 웹팩의 확장성과 생태계 - 2 Webpack 로더 및 플러그인의 커뮤니티 지원 웹팩은 강력한 모듈 번들러로써, 로더와 플러그인을 통해 다양한 파일들을 처리하고 번들링합니다. 이 생태계는 개발자들이 더 나은 워크플로우를 구축하고 프로젝트를 효율적으로 관리할 수 있도록 다양한 옵션과 기능을 제공합니다. 이번 글에서는 웹팩 로더 및 플러그인의 커뮤니티 지원에 대해 살펴보겠습니다. 로더 (Loaders) 로더는 웹팩이 모듈을 해석할 때 특정 파일 형식을 처리하는데 사용됩니다. 예를 들어, JavaScript 파일 내에서 CSS를 import하면 CSS 파일을 해석하고 번들에 포함시킬 수 있습니다. 웹팩 로더의 강점 중 하나는 커뮤니티에서 다양한 로더들을 지속적으로 제공하고 있다는 것입니다. 프로젝트에 필요한 로더를 선택하고 사용함으로써 빌드.. 2023. 12. 29.
20. 웹팩의 확장성과 생태계 - 1 Webpack 플러그인의 활용 웹팩 플러그인은 빌드 과정 중에 여러 작업을 수행하거나 번들 결과물을 최적화하는 데 사용됩니다. 이번 글에서는 몇 가지 유용한 웹팩 플러그인과 그 활용법에 대해 알아보겠습니다. 1. HtmlWebpackPlugin HtmlWebpackPlugin은 HTML 파일을 생성하고 빌드된 번들 파일을 자동으로 삽입해주는 플러그인입니다. 이를 사용하면 빌드된 결과물을 쉽게 확인할 수 있습니다. 설치하기 npm install --save-dev html-webpack-plugin 사용하기 // webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... 다른 설정 ... 2023. 12. 29.
반응형

티스토리툴바