코드 스플리팅
웹팩 코드 스플리팅 우선 이해하기 쉽게 싱글페이지 어플리케이션(SPA)를 예로 들고자 한다. SPA는 최초 웹사이트 페이지를 로딩할 때 특별한 설정을 하지 않은 이상 해당 웹앱의 모든 리소스를 다 불러온다. 이로 인해 웹사이트의 초기 로딩 시간이 오래 걸리며 유저가 모든 페이지를 이용하는 것도 아닌데 유저가 이용하는 페이지와 무관한 소스를 요청한다. 이것은 불필요한 로딩 시간을 기다려야 하기 때문에 사용자 경험(UX)을 나쁘게 하는 요인이 될 수 있다. 그래서 초기 로딩시간을 개선하기 위해 나온 것이 웹팩의 코드 스플리팅이다. SPA라고 해도 해당 라우터를 방문했을 때 관련된 모듈들만을 로딩하는 것이다. 코드 스플리팅을 하는 방법 중 require.ensure와 dynamic import를 사용하여 웹사..
dev-server란 무엇인가?
dev-server 웹팩의 번들링 대상 파일이 변경되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩 실행 후 브라우저를 자동으로 수정된 코드를 반영하여 렌더링해준다. 지금부터 webpack의 dev-server를 데브 서버라고 하겠다. 설치방법은 npm install --save-dev webpack-dev-server 을 터미널에 입력한다. 한편 데브 서버는 일반 웹팩 빌드와 다른 점이 있다. 데브 서버를 실행하여 웹팩 빌드를 하는 경우 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 구체적으로 말하자면 웹팩으로 빌드한 결과물은 메모리에 저장되고 파일로 생성되지 않기 때문에 눈으로 볼 수 없다는 것이다. 또한 개발 서버를 종료하면 번들링한 결과물도 사라진다. 개발 서..
mode란 무엇인가?
웹팩 버전 4이상에서 추가된 속성이다. 크게 development, production, none 모드 3가지가 있다. development 개발모드를 의미하며 코드가 압축되지 않은 상태이며 난독화가 되지 않은 상태이다. 부트스트랩이 적용된 프로젝트를 해당 mode로 빌드한 후 브라우저에 접속할 경우 콘솔에 다음과 같은 경고문이 생길 수 있다. 이럴 경우 경고문에 뜬 해당 경로에 있는 파일을 열람하여 다음 코드를 주석처리하거나 지우면 된다. // bootstrap.js를 node_modules 폴더에서 열람 후 //# 앞에 //를 붙여주자! // //# sourceMappingURL=bootstrap.js.map // poper.js를 node_modules 폴더에서 열람 후 //# 앞에 //를 붙여주자..
plugin란 무엇인가?
plugin의 정의 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이라고 할 수 있다. 웹팩에는 두가지의 확장 기능이 있다. 첫번째는 로더, 두번째는 플러그인이다. 로더는 모듈을 최종적인 아웃풋으로 만들어가는 과정에서 사용하는 것이며 플러그인은 최종적인 결과물을 변형하는 것이라고 할 수있다. plugin의 종류 1. htmlwebpackplugin이란? 웹팩으로 컴파일한 정적 파일 들(js,css, 이미지 등)을 특정 html파일에 나 태그 등을 자동으로 생성하여 해당 정적파일을 삽입하여 새로운 html파일을 특정 위치(예 : 흔히 dist폴더에 생성한다.)에 생성해주는 플러그인을 의미한다. 특정 html 파일을 js나 css, 이미지 등과 함께 웹팩으로 번들링하여 최종적으로 새롭게 완성된 html..
자주 쓰는 loader 2(babel-loader feat.babel-polyfill)
5.babel-loader ES6이상의 자바스크립트 코드는 인터넷 익스플로러 혹은 버전이 낮은 구버전 브라우저에서 지원하지 않는 경우가 있다. 이런 점을 착안하여 ES6이상의 문법을 ES5이하의 코드로 트랜스파일링하도록 하는 기능이 babel이며 이 babel을 웹팩으로 파일을 번들링할 때도 실행하게끔 해주는 것이 babel-loader다. 우선 npm install --save-dev babel-loader @babel/cli @babel/core @babel/preset-env 로 다운 받는다. babel-loader: 웹팩과 바벨을 연동시키도록 해준다. 아래의 것들은 플러그인이지만 babel-loader과 같이 쓰이기 때문에 간략하게 소개하면 아래와 같다. @babel/cli : 터미널에서 바벨 명..
자주 쓰는 loader 1(css-loader, file-loader, url-loader, expose-loader)
loader란 웹팩이 웹앱을 해석할 때 해석하기 힘든 정적자원들을 처리하거나 해당 정적자원들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 dependency graph에 추가하는 역할을 한다. 다양한 loader들은 npm을 통해 다운로드해야 사용할 수 있다. 예 : npm install --save-dev 로더명 로더를 만약 사용하지 않고 css파일을 import하는 js파일을 웹팩으로 컴파일 하면??? 에러가 뜨면서 적절한 로더를 사용하라는 에러문구가 뜨게 된다. 그러면 어떠한 loader들이 있을까? 우선 loader는 아주 다양하기 때문에 이 글에서 모든 loader를 소개하는 것은 무리가 있기 때문에 흔히 프로젝트에 적용하는 loader 중 자주 쓰일 수 있는 loader를 소개하고 설명..