시작은 가볍게 마무리는 묵직하게

웹팩을 실행하여 여러 모듈을 하나의 번들링 파일로 만들 때 자바스크립트에서 에러가 발생하면 브라우저의 콘솔에는 번들링된 하나의 파일 첫째줄에서 에러가 떴다고 알려주기 때문에 어떤 모듈의 몇 번째 줄에서 에러가 떴는지 정확히 알기 쉽지 않다. 쉽게 에러를 트래킹하기 위해 웹팩에서는 source map이라는 모듈을 사용한다. 이것은 에러가 발생하거나 디버깅할 때 번들링하기 전의 파일인 원래 소스 코드로 맵핑해주는 기능을 제공한다. 해당 기능은 다양한 옵션이 있으며 개발모드와 배포모드마다 옵션을 달리해야 적절한 기능을 사용할 수 있다. devtool이라는 key에 source map의 옵션을 적는데 source map의 옵션은 너무나도 많다. devtool을 설정하지 않거나 옵션을 적지 않았을 경우 빌드와 재..

번들링 파일이 포함하고 있는 모듈 시각화하기 지금까지 번들링한 파일들이 어떠한 모듈을 포함하고 있는지 시각적으로 확인한 적이 없으며 확인할 필요가 있다. 왜냐하면 중복된 라이브러리를 각 모듈이 포함하고 있으면 이것은 웹팩 성능 저하를 초래할 수 있기 때문이다. 또한 그와 동시에 번들링한 파일의 크기도 알고 싶을 수도 있다. 이러한 역할을 해주는 플러그인이 바로 webpack-bundle-analyzer이다. 이 플러그인은 웹팩을 실행하거나 npm명령을 입력하면 현재 프로젝트의 번들링 파일이 어떠한 모듈을 포함하고 있고 크기는 얼마인지 번들링 파일별로 확인할 수 있다. 이 플러그인은 다음과 같이 설치한다. npm install --save-dev webpack-bundle-analyzer 또한 설치 후 웹..

코드 압축 기본적으로 웹팩의 mode를 production으로 했을 경우 js파일만 파일이 압축된다. 하지만 서비스를 배포하는데 있어서 조금이라도 렌더링속도 개선 및 코드 난독화를 위해서는 js뿐만 아니라 css, html 등 다양한 소스 코드를 압축할 필요가 있다. css코드 압축 css의 경우 css-minimizer-webpack-plugin이라는 플러그인을 다음과 같이 설치하여 사용한다. npm install --save-dev css-minimizer-webpack-plugin 설명하기에 앞서 이제 webpack.config.js 혹은 webpack.common.js를 웹팩 설정파일이라고 바꿔 칭하겠다. 다음과 같이 웹팩 설정파일에 코드를 추가한다. // ... const CssMinimizer..

웹팩 코드 스플리팅 우선 이해하기 쉽게 싱글페이지 어플리케이션(SPA)를 예로 들고자 한다. SPA는 최초 웹사이트 페이지를 로딩할 때 특별한 설정을 하지 않은 이상 해당 웹앱의 모든 리소스를 다 불러온다. 이로 인해 웹사이트의 초기 로딩 시간이 오래 걸리며 유저가 모든 페이지를 이용하는 것도 아닌데 유저가 이용하는 페이지와 무관한 소스를 요청한다. 이것은 불필요한 로딩 시간을 기다려야 하기 때문에 사용자 경험(UX)을 나쁘게 하는 요인이 될 수 있다. 그래서 초기 로딩시간을 개선하기 위해 나온 것이 웹팩의 코드 스플리팅이다. SPA라고 해도 해당 라우터를 방문했을 때 관련된 모듈들만을 로딩하는 것이다. 코드 스플리팅을 하는 방법 중 require.ensure와 dynamic import를 사용하여 웹사..

dev-server 웹팩의 번들링 대상 파일이 변경되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩 실행 후 브라우저를 자동으로 수정된 코드를 반영하여 렌더링해준다. 지금부터 webpack의 dev-server를 데브 서버라고 하겠다. 설치방법은 npm install --save-dev webpack-dev-server 을 터미널에 입력한다. 한편 데브 서버는 일반 웹팩 빌드와 다른 점이 있다. 데브 서버를 실행하여 웹팩 빌드를 하는 경우 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 구체적으로 말하자면 웹팩으로 빌드한 결과물은 메모리에 저장되고 파일로 생성되지 않기 때문에 눈으로 볼 수 없다는 것이다. 또한 개발 서버를 종료하면 번들링한 결과물도 사라진다. 개발 서..

웹팩 버전 4이상에서 추가된 속성이다. 크게 development, production, none 모드 3가지가 있다. development 개발모드를 의미하며 코드가 압축되지 않은 상태이며 난독화가 되지 않은 상태이다. 부트스트랩이 적용된 프로젝트를 해당 mode로 빌드한 후 브라우저에 접속할 경우 콘솔에 다음과 같은 경고문이 생길 수 있다. 이럴 경우 경고문에 뜬 해당 경로에 있는 파일을 열람하여 다음 코드를 주석처리하거나 지우면 된다. // bootstrap.js를 node_modules 폴더에서 열람 후 //# 앞에 //를 붙여주자! // //# sourceMappingURL=bootstrap.js.map // poper.js를 node_modules 폴더에서 열람 후 //# 앞에 //를 붙여주자..