디버깅도 편하게 할 수 있다. 서버/클라이언트 코드 모두.

  • config/webpack.dev.js
1
2
3
4
5
6
7
8
9
10
11
devServer: {
contentBase: "dist",
overlay: true,
stats: {
colors: true
},
hot: true
},
// 해당줄을 추가: 웹팩 번들링된 코드가 아니라
// 본래 JS 코드로 볼 수 있게 해준다.
devtool: "source-map",
  1. 원하는 라인에 debugger를 입력한다.
  2. 브라우저에서 크롬 개발자 도구를 킨다.
  3. 서버 코드는 개발자 도구 Element 탭 옆에 초록색 nodejs 버튼을 클릭해서 확인가능
  4. 클라이언트 코드는 기존 개발자 도구 창에서 확인 가능하다!

Reference

https://www.udemy.com/webpack-beyond-the-basics

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea