20. 웹팩(Webpack) 디버깅

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

• 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