[Webpack] - #6 Dev Server

 [ Webpack 시리즈 ]

 

[Webpack] - #1 Webpack이란?

[Webpack] - #2 Entry

[Webpack] - #3 Output

[Webpack] - #4 Loader

[Webpack] - #5 Plugin

[Webpack] - #6 Dev Server

[Webpack] - #7 웹팩 세팅하기 (feat: ES module)

 

 

 

 

Dev Server

• 매번 웹팩 명령어를 실행하지 않아도 코드를 수정하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다
• 실시간으로 리로드 되는 웹팩의 개발 환경

 

 

동작과정

• dev-server는 dist 폴더와는 관계없이 동작
  • 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에 보이지 않는다.
  • 메모리에 저장되고 파일로는 생성 X
• 수정된 결과물 또한 메모리 상에 있는 결과값과 비교해서 수정이 된다.
• 웹팩 데브 서버로 개발한 후 개발이 완료되면 명령어를 이용해 빌드과정을 거쳐야 한다.

//package.json

"scripts": {
	"dev": "webpack serve",
    	"build": "webpack"
}

 

프록시(Proxy)설정

// webpack.config.js

module.exports = {
	devServer: {
    	proxy: {
        	'/api': 'http://localhost:3000'
        }
    }
}

로컬 웹팩 데브 서버를 위와 같이 지정한 경우, api 요청시 지정된 도메인, 예를들어 (http://domain.com)으로 요청을 보낼 경우 CORS 경고를 마주하게된다.

 

// webpack.config.js

module.exports = {
	devServer: {
    	proxy: {
        	'/api': 'http://domain.com'
        }
    }
}

이런식으로 수정해주면 CORS 문제를 해결할 수 있다.

서버는 프록시 서버로 인해 지정된 도메인 주소로 요청했다고 인식하게 된다.

 

 

// webpack.config.js

module.exports = {
	devServer: {
    	proxy: {
        	'/api': {
            	target: 'domain.com',
                changeOrigin: true
            }
        }
    }
}

위와같이 도메인 이름이 IP주소가 아니었을 경우엔 changeOrigin 옵션을 추가해 줘야한다.