CRA가 그리운 하루1 - webpack과 기타 등등

CRA가 그리운 하루1 - webpack과 기타 등등

CRA가 그리운 하루1 - webpack과 관련 플러그인 종류

본격! CRA 없이 웹사이트 구현해보기!

아 물론 리액트도 없다..ㅠㅠ

하지만 너무 재밌어보여서 어제 잠을 못 잤다ㅋㅋㅋㅋㅋ

과제의 모든 요구사항을 시간 내에 구현할 수 있을진 모르겠지만 재밌으면 됐지 뭐..ㅎ

웹팩이란?

모듈 번들러, 모듈간의 의존성을 파악하여 하나의 파일로 번들링 해준다

➝ 한 마디로 편리하게 분리해서 작성했던 자바스크립트 파일들을 의존성 관계를 파악하여 하나의 파일로 모아주는 것을 말한다.

➝ js 파일 이외에 img, css, mp4 등도 번들링 해준다.

그래서 이번에 설치한 것들

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin webpack-merge

webpack : 웹팩을 사용해야하니까 설치

webpack-cli : 커맨드 라인에서 webpack을 실행할 때 사용되는 도구

➝ webpack v4 이상부턴 설치해야한다고 한다.

webpack-dev-server: 라이브 리로딩을 지원하는 개발 전용 서버

➝ webpack-serve가 deprecated 되고 현재는 이걸 사용한다고 한다.

webpack-merge: dev와 prod의 빌드 목적은 다르지만 공통의 설정이 필요하다. 이러한 설정들을 합쳐 주는 유틸리티

➝ common을 작성해놓고 ( common + prod ), ( common + dev ) 이런 식으로 설정 파일을 합친다.

html-webpack-plugin: 각각 번들된 js, css 파일을 html에 link 태그와 script 태그로 추가하는 것을 자동화 해주는 플러그인

이후에 더 설치할 것이 있으면 추가할 예정이다.

from http://shu-shu-bear.tistory.com/27 by ccl(A) rewrite - 2021-10-02 01:27:44