맨위로가기

웹팩

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

웹팩은 개발 과정에서 파일을 제공하는 내장 개발 서버를 제공하며, 핫 모듈 교체(HMR) 기능을 지원한다. 웹팩 개발 서버는 별도 서버 설치 없이 웹 애플리케이션을 실행하고 테스트할 수 있게 하며, 코드 변경 시 페이지 전체를 다시 로드하지 않고 변경된 부분만 업데이트하여 개발 효율성을 높인다. HMR은 개발자가 페이지를 새로 고칠 필요 없이 웹 페이지를 실시간으로 업데이트하는 기능으로, 개발 시간을 단축하고 개발 흐름을 원활하게 만들어준다. 개발 서버는 HTTPS, 프록시 설정, 정적 파일 제공 등 다양한 옵션을 제공하며, `webpack.config.js` 파일 내 `devServer` 옵션을 통해 세부 설정을 조정할 수 있다.

더 읽어볼만한 페이지

  • 2012년 소프트웨어 - 윈도우 8
    윈도우 8은 2012년 마이크로소프트가 출시한 운영 체제로, 터치스크린 기기 사용성을 개선하기 위해 메트로 디자인을 도입했으며, 윈도우 8.1로 개선되었고, 32/64비트 등 다양한 에디션으로 출시되었으나 2016년 지원이 종료되었다.
  • 2012년 소프트웨어 - 마이크로소프트 프레시 페인트
    마이크로소프트 프레시 페인트는 유화 질감과 붓질 표현을 디지털 환경에서 구현하는 디지털 페인팅 프로그램으로, 뉴욕 현대 미술관과의 협력을 통해 사용자 테스트를 거쳤으며, 초기 개발 단계에서는 '프로젝트 구스타브'라는 코드명으로 진행되었다.
  • MIT 라이선스 소프트웨어 - MS-DOS
    MS-DOS는 마이크로소프트가 개발한 개인용 컴퓨터용 디스크 운영 체제로, IBM PC의 표준 운영 체제로 널리 사용되었으며, 단일 작업 환경과 명령줄 인터페이스를 특징으로 한다.
  • MIT 라이선스 소프트웨어 - Zcash
    Zcash는 존스 홉킨스 대학교 연구를 기반으로 개발된 익명성 강화 암호화폐로, zk-SNARK 영지식 증명을 통해 거래 당사자의 익명성을 보장하지만, 범죄 악용 우려와 규제 대상 가능성이 존재한다.
  • 공식 웹사이트에 알 수 없는 변수를 사용한 문서 - 브루클린 미술관
    브루클린 미술관은 1823년 브루클린 견습생 도서관으로 시작하여 현재 약 50만 점의 소장품을 보유한 뉴욕 브루클린 소재의 미술관으로, 다양한 분야의 예술 작품을 전시하며 특히 아프리카 미술과 여성주의 미술에 대한 기여가 크다.
  • 공식 웹사이트에 알 수 없는 변수를 사용한 문서 - 광주지방기상청
    광주지방기상청은 광주광역시와 전라남도 지역의 기상 예보, 특보, 관측, 기후 정보 제공 등의 업무를 수행하는 기상청 소속 기관으로, 1949년 광주측후소로 설치되어 1992년 광주지방기상청으로 개편되었으며, 기획운영과, 예보과, 관측과, 기후서비스과와 전주기상지청, 목포기상대를 두고 있다.
웹팩 - [IT 관련 정보]에 관한 문서
기본 정보
웹팩 로고
웹팩 로고
개발자Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, Kees Kluskens, 웹팩 기여자들
최초 릴리스2014년 2월 19일
최신 버전5.95.0
최신 버전 출시일2024년 9월 25일
리포지토리웹팩 GitHub 리포지토리
프로그래밍 언어자바스크립트
운영체제리눅스, macOS, 윈도우
플랫폼Node.js
라이선스MIT 라이선스
공식 웹사이트웹팩 공식 웹사이트
개요
종류모듈 번들러
특징
주요 기능모듈 번들링
코드 분할 (주문형 코드)
정적 자산 처리
개발 서버
핫 모듈 교체 (Hot Module Replacement, HMR)
기타
관련 기술Node.js
자바스크립트

2. 웹팩 개발 서버

웹팩은 개발 시 파일을 제공하기 위해 HTTP 서버로 사용할 수 있는 내장 개발 서버인 ''webpack-dev-server''를 제공한다.

2. 1. 핫 모듈 교체(HMR)

핫 모듈 교체(Hot Module Replacementeng, HMR)는 개발자가 웹 페이지를 새로고침하지 않고도 코드 변경 사항을 즉시 반영할 수 있게 해주는 기능이다. 웹팩(Webpack)은 개발 과정에서 파일 서빙을 위한 HTTP 서버 역할을 하는 내장 개발 서버인 ''webpack-dev-server''를 제공하는데, HMR은 이 개발 서버를 통해 사용할 수 있다.

참조

[1] 웹사이트 Release Date of Version 1.0.0 https://libraries.io[...] 2020-12-31
[2] 웹사이트 LICENSE file on GitHub https://github.com/w[...] 2020-12-31
[3] 웹사이트 License field from webpack - npm https://www.npmjs.co[...] 2020-12-31
[4] 웹사이트 Web Performance Optimization with webpack https://developers.g[...] Google Inc. 2018-10-16
[5] 웹사이트 A Beginner's Guide to webpack 4 and Module Bundling https://www.sitepoin[...] SitePoint 2018-10-16
[6] 뉴스 Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost https://www.infoq.co[...] InfoQ 2018-10-16
[7] 웹사이트 High-performance webpack config for front-end delivery https://www.codement[...] Codementor 2018-10-16
[8] 웹사이트 What is webpack https://survivejs.co[...] SurviveJS 2018-10-16
[9] 웹사이트 What is webpack https://github.com/w[...] GitHub 2018-02-25
[10] 웹사이트 Dynamic imports https://webpack.js.o[...] webpack 2022-06-06
[11] 웹사이트 Release Date of Version 1.0.0 https://libraries.io[...] 2020-12-31
[12] 웹사이트 Releases · webpack/webpack https://github.com/w[...] 2024-10-30
[13] 웹사이트 LICENSE file on GitHub https://github.com/w[...] 2020-12-31
[14] 웹사이트 License field from webpack - npm https://www.npmjs.co[...] 2020-12-31
[15] 웹사이트 Web Performance Optimization with webpack https://developers.g[...] Google Developers 2018-10-16
[16] 웹사이트 A Beginner’s Guide to webpack 4 and Module Bundling https://www.sitepoin[...] SitePoint 2018-10-16
[17] 뉴스 Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost https://www.infoq.co[...] InfoQ 2018-10-16
[18] 웹사이트 High-performance webpack config for front-end delivery https://www.codement[...] Codementor 2018-10-16
[19] 문서 Webpack 3 to Webpack 4: tips on migrating https://codilime.com[...] CodiLime 2019-06-25
[20] 웹사이트 What is webpack https://survivejs.co[...] SurviveJS 2018-10-16
[21] 웹사이트 What is webpack https://github.com/w[...] GitHub 2018-02-25
[22] 간행물 import() proposal for JavaScript https://github.com/t[...] Ecma International, Technical Committee 39
[23] 웹인용 Releases · webpack/webpack https://github.com/w[...] 2019-01-20
[24] 웹인용 Web Performance Optimization with webpack https://developers.g[...] 구글 디벨로퍼스 2018-10-16
[25] 웹인용 A Beginner’s Guide to Webpack 4 and Module Bundling https://www.sitepoin[...] SitePoint 2018-10-16
[26] 뉴스 Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost https://www.infoq.co[...] InfoQ 2018-10-16
[27] 웹인용 High-performance webpack config for front-end delivery https://www.codement[...] Codementor 2018-10-16
[28] 웹인용 What is Webpack https://survivejs.co[...] SurviveJS 2018-10-16
[29] 웹인용 What is webpack https://github.com/w[...] GitHub 2018-02-25
[30] 뉴스 Webpack: An Introduction - Wisdom Geek http://wisdomgeek.co[...] 2017-01-12


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com