주요 디펜던시 요소
- react, react-dom
- webpack, webpack-cli, webpack-dev-server
- @babel/core, @babel/preset-env, @babel/preset-react
- babel-loader, css-loader, style-loader, file-loader
- html-webpack-plugin, clean-webpack-plugin, mini-css-extract-plugin
react, react-dom
react: 리액트 코어 입니다.
(!) react-dom: 리액트가 DOM을 컨트롤 할 수 있는 Methods를 제공합니다.
webpack: 모듈 번들러인 웹팩의 코어입니다.
webpack-cli: webpack을 커맨드 라인에서 사용할 수 있게 합니다.
webpack-dev-server: 웹팩 빌드 결과를 메모리에 올려놓아 개발서버를 구성하고, 개발 진행에 있어 도움을 줄 수 있습니다.
@babel/core: 트랜스파일러 바벨의 코어입니다.
@babel/preset-env*: 환경 프리셋 모듈입니다. (ES5, ES6 ..)
@babel/preset-react: React의 JSX를 JS가 이해할 수 있게 트랜스파일링 합니다.
babel-loader: babel의 presets을 가져와 webpack 빌드시에 적용 합니다.
css-loader: CSS를 JS가 이해할 수 있도록 변환 합니다. (Webpack only can read JS)
style-loader: JS가 이해한 CSS코드를 HTML에 삽입 합니다.
file-loader: 이미지, 동영상, 폰트등의 파일을 가져옵니다.
html-webpack-plugin: webpack이 번들링 한 js파일을 html에 넣어주고, html이 저장되는 위치에 저장 합니다.
clean-webpack-plugin: 매번 번들링 할 때마다 이전 번들링 결과를 삭제 합니다.
mini-css-extract-plugin: 가져온 CSS코드를 파일로 변환 및 minify를 합니다.
babel-preset-env*: 일부 브라우저만 지원 가능하게 할 수 있음, 모든 브라우저를 호환해도 되지 않는 이유는 구글의 데이터에 따르면 브라우저 사용자 중 99퍼센트는 ES6를 지원하는 브라우저를 사용중이기때문