Weeeeey Weeeeey

1. 기본 웹팩의 등장 배경과 마찬가지로 브라우저는 자바스크립트의 발전 속도를 따라오지 못하면서 es5 이후의 문법들을 직접적으로 해석할 수 없다. 때문에 화살표 함수라던가 let cont 변수, jsx, 타입스크립트 등의 문법들을 브라우저가 알고 있는 자바스크립트 문법으로 변환시켜줘야 함. 이러한 도구를 트랜스파일러 라고 하는데 babel은 트랜스파일러 중 하나. Babel의 동작(빌드)은 3단계로 진행된다. Parsing -> Transforming -> Printing npm install -D @babel/core @babel/cli 바벨을 사용하기 위해 babel/core 와 커맨드 라인 인터페이스인 babel/cli를 개발 모드로 설치해줌. // ./src/math.js const sum = ..

1. 기본 브라우저는 자바스크립트의 발전 속도를 따라오지 못함. 때문에 es2015에서 표준 모듈 시스템을 내놓았지만 몇 몇 브라우저는 이를 사용하지 못했고, 브라우저에 무관하게 모듈을 사용하고 싶다는 욕구하에 모듈 번들러인 웹팩이 등장했다. 웹팩은 모든 파일을 모듈로 바라보고 이것들을 하나의 파일(혹은 소수)로 합쳐주는 번들러이다. 하나의 시작점인 entry 포인트로부터 의존적인 모듈을 전부 차장내어 output을 만들어낸다. npm install -D webpack webpack-cli 패지키 매니저를 통해 웹팩과 커맨드라인으로 웹팩을 실행시킬 수 있게 하는 webpack-cli를 설치해준다. node_modules/.bin/webpack // webpack 위와 같은 명령어를 통해 (같은 동작) 웹..

webpack 여러 개의 파일을 하나로 합쳐주는 모듈 번들러 기능 css loader 기능 jsx 변환 작업 여러 개로 나눠진 js 파일을 html이 실행 할 수 있는 하나의 js파일로 합쳐줌 파일 분할(Code Splitting) 애플리케이션 번들에 포함된 코드를 여러 개의 조각/청크 로 분할하는 기술 초기 로딩 시 필요한 최소한의 코드만 다운로드 하여 페이지 로딩 속도 향상 대규모 애플리케이션에 유용 리액트 라우터와 같은 라이브러리와 잘 통합되어 있어, 각 페이지에 필요한 코드만 로딩하게 도와줌 // 동적 import() - 모듈은 필요할 때만 로딩되며 웹팩은 이를 감지하여 해당 모듈을 별도의 청크로 분할 const someModule = import('./someModule.js'); // 웹팩의 ..