명령어 모음

// 기본세팅 및 웹팩설치
yarn init
yarn add webpack webpack-cli -D

// 바벨설정
yarn add babel-loader @babel/core @babel/preset-env @babel/cli @babel/plugin-proposal-class-properties -D
yarn add core-js@3 -D

// 스타일관련 loader 설정
yarn add style-loader sass-loader sass css-loader -D 

// 리소스 관련 설정
이전에는 file-loader를 사용했지만, webpack 5부터는 asset/resource로 대체가능
별도의 설치과정 없이, type: 'asset/resource'과 같이 설정가능

// 웹팩 HtmlWebpackPlugin 설정(웹팩으로 빌드한 결과물로 Html 파일생성)
yarn add html-webpack-plugin -D

// 웹팩 Dev Server 설정(proxy 및 코드 수정 시 추가적인 빌드없이 바로 확인가능)
yarn add webpack-dev-server -D 

// esLint, Prettier 설정추가
yarn add eslint eslint-config-prettier eslint-plugin-prettier prettier -D 

// React 관련 패키지 추가
yarn add react react-dom react-router-dom

// React babel, eslint 관련 패키지 추가
yarn add @babel/preset-react eslint-plugin-react -D

// jest, testing-library 설정추가
yarn add @testing-library/user-event @testing-library/jest-dom @testing-library/react jest -D