개발할 때 서버도 띄워줘야 하고 코드를 수정할 때마다 webpack을 실행해야 합니다.
매번 webpack을 실행하는 것은 번거롭기 때문에 조금 더 쉽게 개발하기 위해 개발 환경을 설정해 보겠습니다.
watch 모드 사용
webpack에 종속성 그래프내의 모든 파일에서 변경사항을 감시할 수 있습니다. 이러한 파일 중 하나가 업데이트되면 코드가 다시 컴파이되므로 전체 빌드를 자동으로 실행해줍니다.
npx webpack --watch:watch옵션을 주게 되면 한번 build가 되고 대기하는 상태가 됩니다.
- webpack에 관련된 파일들이 수정되면 자동으로 build가 됩니다.
- package.json 설정
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --watch", }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.58.2", "webpack-cli": "^4.9.0" } }
webpack-dev-server 사용
webpack-dev-server는 웹 서버와 실시간 리로드를 사용할 수 있는 기능을 제공합니다.- webpack-dev-server 설치
npm install --save-dev webpack-dev-server
dist디렉토리에서 파일을 제공하도록 설정합니다.
port속성을 이용하여 수신할 포트 번호를 지정할 수 있습니다. (기본 포트 : 8080)
webpack.config.js
module.exports = { devServer: { static: './dist', port: 5000, }, };
- 서버를 쉽게 실행할 수 있도록 스크립트를 추가합니다.
package.json
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack serve --open", "build": "webpack --watch" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^5.3.2", "webpack": "^5.57.1", "webpack-cli": "^4.9.0" } }
npm start명령어로 실행
