Webpack은 모듈 번들러로, 프로젝트 내의 모든 자원(JavaScript, CSS, 이미지 등)을 모듈로 인식하여 하나로 묶어주는 도구입니다. 코드 수정 사항을 확실하게 확인하기 위해서는 Webpack을 통해 빌드한 후에 결과물을 확인해야 합니다. 아래는 Webpack으로 코드 수정 사항을 확인하는 과정입니다.
1. 프로젝트 빌드하기
먼저, 프로젝트를 빌드해야 합니다. 이때, package.json 파일 내에 "build" 스크립트가 설정되어 있어야 합니다. 아래는 예시입니다.
"scripts": {
"build": "webpack --config webpack.config.js"
}
프로젝트 루트 경로에서 다음 명령어를 실행하여 프로젝트를 빌드합니다.
npm run build
이 명령어는 webpack.config.js 파일을 참조하여 Webpack으로 빌드하게 됩니다.
2. 빌드 결과물 확인하기
빌드가 완료되면, Webpack은 빌드 결과물을 설정한 output 경로에 생성합니다. 일반적으로 dist나 build 폴더에 결과물이 생성됩니다.
빌드 결과물을 확인하기 위해서는 결과물 파일을 열어 내용을 살펴볼 수 있습니다. JavaScript 파일의 경우, 수정한 코드가 반영되어 있는지 확인하면 됩니다.
3. 브라우저에서 실행하기
빌드 결과물을 브라우저에서 실행하여 수정한 코드가 올바르게 동작하는지 확인할 수 있습니다. 결과물 파일을 웹 서버에 배포하거나, 로컬에서 실행할 수 있습니다.
로컬에서 실행하는 경우, 다음과 같이 간단한 웹 서버를 사용할 수 있습니다.
npx http-server dist
위 명령어를 실행하면 dist 폴더가 웹 서버로 동작하게 되어, http://localhost:8080 같은 주소로 접속하여 결과물을 확인할 수 있습니다.
4. 수정 사항 확인하기
웹 브라우저에서 결과물을 확인한 후, 수정한 부분이 올바르게 반영되었는지 확인합니다. 코드 수정 사항이 제대로 적용되었다면, 수정한 내용이 웹 브라우저에서 정상적으로 동작할 것입니다.
이렇게 Webpack을 사용하여 코드 수정 사항을 확인할 수 있습니다. Webpack의 강력한 기능을 활용하여 프로젝트를 효율적으로 개발할 수 있습니다.