«   2021/10   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Tags
more
Archives
Today
0
Total
243
관리 메뉴

개발블로그

babel / wepback 사용하기 본문

babel / wepback 사용하기

학교옆메추리 2020. 7. 13. 09:41

Source Map

기존 코드에서 에러가 나도록 새 codeline을 추가하였습니다.

<7번째 줄에서 error를 발생시킴>
<Chrome devtools의 source tab>

원본 소스코드에서는 7번 line에서 에러가 발생하였지만, 크롬 개발자도구는 28번째 줄이라고 말해줍니다.

이는 웹팩이 여러 파일 및 소스코드를 빌드하는 과정에서 여러 코드들이 추가되기 때문인데요, 프로젝트가 커지고 코드가 복잡해질수록 에러가 난 곳을 정확하게 찾기 힘듦니다.

 

이를 해결해 주는 것이 Source map인데요, 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다.

//webpack.config.js

module.exports = {
	...,
    
	devtool: "cheap-module-eval-source-map",
	...
}

 

souremap을 추가하게 되면,

<Chrome devtools의 source tab>

정확히 원본 소스코드에서 에러가 난 부분을 짚어주기 때문에 에러관리를 쉽게 할 수 있겠습니다.

 

devtool 옵션에 대하여 설명되어 있는 페이지입니다.

각 옵션의 장단점이 있는데요, 개발과 배포시의 필요점을 잘 생각하여 사용하시면 될 것 같습니다.

https://webpack.js.org/configuration/devtool/#devtool

 

Devtool | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

 

 

 

 

'' 카테고리의 다른 글

도착지는 하나지만, 가는 길은 하나가 아니다.  (0) 2020.08.15
기본은 중요했다.  (0) 2020.07.26
babel / wepback 사용하기  (0) 2020.07.13
Static file 서빙하기  (0) 2020.07.12
Express middlewares  (0) 2020.07.12
HTTP/1.1 vs HTTP/2  (0) 2020.05.29
0 Comments
댓글쓰기 폼