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

코드 압축 기본적으로 웹팩의 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 폴더에서 열람 후 //# 앞에 //를 붙여주자..

plugin의 정의 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이라고 할 수 있다. 웹팩에는 두가지의 확장 기능이 있다. 첫번째는 로더, 두번째는 플러그인이다. 로더는 모듈을 최종적인 아웃풋으로 만들어가는 과정에서 사용하는 것이며 플러그인은 최종적인 결과물을 변형하는 것이라고 할 수있다. plugin의 종류 1. htmlwebpackplugin이란? 웹팩으로 컴파일한 정적 파일 들(js,css, 이미지 등)을 특정 html파일에 나 태그 등을 자동으로 생성하여 해당 정적파일을 삽입하여 새로운 html파일을 특정 위치(예 : 흔히 dist폴더에 생성한다.)에 생성해주는 플러그인을 의미한다. 특정 html 파일을 js나 css, 이미지 등과 함께 웹팩으로 번들링하여 최종적으로 새롭게 완성된 html..

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 : 터미널에서 바벨 명..