빌드 속도 최적화 with loader

webpack 설정을 처음 할 때, ts(또는 tsx) 파일의 처리하는 설정을 잘못했다. 때문에 빌드 속도가 약 30초 정도로 오래 걸렸다. 당시 설정은 다음과 같았다. { test: /\.(js|jsx|ts|tsx)$/i, use…

빌드 환경 구축 with Webpack

프로젝트 빌드 환경을 직접 구축하기 위해 여러 옵션을 공부하고 적용했다. 이번 글에서는 스모디 프로젝트에 사용된 webpack 빌드 옵션을 정리하려 한다. 스모디 4.2.1 버전 기준 webpack 설정은 다음과 같다.

babel-loader와 ts-loader 그리고 esbuild-loader

프로젝트의 webpack 설정을 다시 점검하는 시간을 가졌다. 그러던 중 ts와 tsx 파일을 처리하는 로더에 babel-lader와 ts-loader가 함께 사용된 것을 확인했다. 꼭 둘 다 사용해야 하는 것인지 확실히 조사가 필요했다. 또한 관련…

[Webpack] JS 파일 크기 줄이기 with mode, optimization, devtool

최적화를 진행하기 위해 요청한 리소스의 크기를 줄이는 방법이 있다. 이번 게시글에서는 webpack으로 프로젝트를 번들링할 때 js 파일의 크기를 줄이는 방법에 대해서 정리하려한다.