webpack 에 대한 설명 여기 에서 확인할 수 있다. Babel 과 polyfill 에 대한 설명은 여기 에서 확인할 수 있다. webpack에서 polyfill 설정에 대한 게시글은 여기 에서 확인할 수 있다. 들어가며 이 포스팅 에서 babel의 각 설정에 대해 자세히 다루지 않았다. 이번 포스팅에서 설정 파일에 대해 좀 더 자세히 살펴보…

TypeScript 설치 및 설정 필요한 패키지를 설치하자. tsconfig-paths-webpack-plugin tsconfig.json 파일에 설정된 경로 별칭(path aliases)을 webpack에게 알려주고, 이러한 별칭을 해석하여 모듈을 로드할 때 실제 경로를 찾도록 도와주는 플러그인이다. 이 플러그인을 설치하지 않는다면 경로 별칭을 tsc…

이제 webpack을 설정해보자. webpack.common.js 먼저 webpack.common.js 를 생성할 것이다. 이 파일은 개발 환경과 배포 환경에서 공통적으로 사용되는 설정들을 담고 있다. 추가적인 설정에 관한 설명은 이 게시글이 너무 길어질 수 있기 때문에 자세하게 다루지 못하지만, 간단하게 주석으로 설명을 달아두었다. 개발 환경은 we…

들어가기 전에 React 환경을 구축하기 위해 CRA (Create-React-App) 를 사용한다면 기본적으로 Webpack과 Babel과 같은 설정들이 세팅되어 있다. 모듈 번들러(Module Bundler)에 대해 공부하면서 CRA 없이 React 프로젝트를 설정하고 싶었다. 그래서 CRA 없이 React 프로젝트를 시작하는 방법을 정리해보았다. …

들어가며 이 포스팅 에 이어서 이번 포스팅에서는 webpack에서 polyfill을 설정하는 방법에 대해 알아보도록 하자. webpack 에 대한 설명 여기 에서 확인할 수 있고, Babel 과 polyfill 에 대한 설명은 여기 에서 확인할 수 있다. Polyfill 설정 Babel v7.4.0부터 @babel/polyfill 패키지는 사용…

웹팩(Webpack) 이란? 웹팩(Webpack) 은 모듈 번들러(Module Bundler)로 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images, 폰트 등)을 모두 모듈로 보고 이를 조합해 병합된 하나의 결과물을 만드는 도구다. Webpack은 자바스크립트 애플리케이션을 위한 모듈 번들러이지만, CSS, HTML,…