프록시(Proxy) 설정
devServer에 프록시 설정을 통해 개발 단계에서 발생하는 CORS 문제를 해결할 수 있다고 한다.
Webpack Dev Server | 웹팩 핸드북
Webpack Dev Server 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경
joshua1988.github.io
HMR(Hot Module Replacement)
데브서버를 쓰면 알아서 새로고침을 해주는데 HMR을 쓰면 새로고침도 안하고 코드를 바꿔준다고 함
Hot Module Replacement | 웹팩 핸드북
HMR(Hot Module Replacement) HMR은 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정입니다. 브라우저 새로 고침을 위한 LiveReload
joshua1988.github.io
소스 맵
웹팩 빌드된 코드와 개발 단계의 CSS, JS 위치를 매칭해주는 기능으로 디버깅할떄 도움이 된다.
이게 없으면 빌드 이후에 실행했는데 bundle.js에서 발생했다고 에러가 발생해서 어디서 발생한 문제인지 알수가 없는
문제를 해결해
https://joshua1988.github.io/webpack-guide/devtools/source-map.html#%EC%86%8C%EC%8A%A4-%EB%A7%B5
Source Map | 웹팩 핸드북
소스 맵 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다.
joshua1988.github.io
웹팩 실행 환경을 개발/운영 단계 구분하여 관리하기
스크립트에 개발/운영 단계를 구분하는 방식
// package.json
{
"build": "webpack",
"development": "npm run build --env mode=development",
"production": "npm run build --env mode=production"
}Webpack Merge
아래와 같이 파일을 분리하고 공통 요소는 common에서 관리하는 방식
webpack.common.js
webpack.dev.js
webpack.prod.js
댓글