webpack2 [Webpack] with debug bundle.js는 우리가 죽어도 못읽을것 처럼 적혀있다. 만약, 디버깅을 해야하는 상황에서 우리는 어쩔까... 디버깅을 위해서 우리는 소스맵을 추가해야한다. 소스 맵은 역매핑을 통해 빌드 전의 상태를 보여줌으로써 번들을 구성하고 있는 코드가 어디서 오는지를 보여준다. 1. tsconfig.json 파일의 sourceMap을 true로 변경한다. (주석을 해제한다.) 2. webpack.config.js 파일에 해당 소스 맵을 추출해 최종 번들에 포함하라고 지시한다. 이 두가지를 추가한 뒤 다시 번들링하면 브라우저에 소스 맵이 작동할 것이다. "부야~" 2023. 1. 30. [Webpack] with TypeScript Webpack : 웹팩(Webpack 또는 webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다. 모듈 번들러 : 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. (출처) 1. Typescript 환경 설정 tsc --init npm init -y npm install lite-server tsconfig.json 설정 "include": ["src"] 추가 "outDir": "./dist" 옵션 설정 "target": "ES6" 옵션 설정 ts 파일 작업. index.html의 body 태그에 type="module"을 제공하지 않는다면 서버를 설치.. 2023. 1. 30. 이전 1 다음
