Webpack과 Babel 기본 설정(1)- Create-react-app를 사용하지 않는다면!

리액트를 접하는 가장 편리한 방식은 Create-React-app을 사용하는 것이다.

그러나 좀 더 복잡한 설정을 해야할 때 cra를 사용하지 않고

직접 webpack, babel의 설정을 변경해줘야할 때가 있기 때문에

create-react-app을 사용하더라도 기본적으로 webpack과 babel을 설정하는 기본적인 방법은 알고 있으면 좋다.

cra는 react를 사용하기 위해 필요한 wepback과 babel 설정과 리액트 기본 라이브러리를 합쳐놓은 것이기 때문이다.

그러나 webpack은 한 번에 다 알기 너무 양이 많고 어렵기 때문에 기본적인 webpack 설정만 알아보도록 한다.

 

npm init으로

 

package.json 파일을 만들어주고 

 

 

이제 필요한 디펜던씨들을

npm install 모듈이름

으로 설치해주면 된다.

그러면 node_modules 폴더와 packa.json파일에 모듈이름이 추가된 것을 볼 수 있는데

현재 프로젝트에 사용되어 있는 모듈들을 정리해둔 것이 package.json 파일이다. 

 

단 개발에서만 쓰이는 모듈들은 -D를 붙여주면(또는 -dev)

devDependencies에 기록되게 되고

후에 production용에는 포함되지 않는다.

 

바벨은 최신문법을 지원하지 않는 브라우저들에서는

최신 문법으로 개발된 코드들이 해당 브러우저에 맞게 코드를 변경해주는 역할을 한다.

 

웹팩은 잘게 나누어진 파일을 하나로 합쳐주는 역할을 한다. 

예를 들어  javascript 파일을  모듈식으로 쪼개어 관리할 수 있게 되고 이를 합치는 부분에 대해서는 별도로 생각할 필요가 없다

 

 

webpack 4.0부터 configure file을 따로 설정해주지는 않아도 되지만

기본 디폴트 설정을 바꿔주고 싶으면   webpack.config.js 파일을 추가하여 설정을 바꿔줄 수 있다. 

기본적으로 알아두면 좋은 것은

Entry, Output, Mode, Plugins, Browser Compatiability, Environment가 있다.

 

Entry

entry는 내부 디펜던시 그래프를 만들기 시작하기 위해 사용해야하는 모듈을 가르켜준다.

이 엔트리 포인트가 의존하고 있는 모듈과 라이브러리를 찾게 되어 있다.

(webpack.config.js로 설정해주지 않으면 기본적으로는 .src/index.js 파일로 설정되어 있다. )

 

 

엔트리 포인트를 정의하는 여러 방법들

Entry Points | webpack

 

Output

output은 합친 번들 파일을 어디에다가 둘 건지, 어떤 이름으로 할 건지 등을 정한다.

따라서 build할 때마다 새로 만들어지게 된다.

(기본적으로는

./dist/main.js로 만들어지게 되지만 output 또한 얼마든지 설정을 바꿀 수 있다.)

 

Output | webpack

 

Loader

기본적으로 webpack은 javascript fil과 json file만 인식할 수 있다. 

따라서 jsx, text, css file 등 여러 형식의 파일을 사용하기 위해서 loader를 사용한다.

(jsx는 React.createElement(component, props, ...children)를 대체하는 Syntantic Sugar)

 

여기서 test는 어떤 형식의 파일을 바꿀 것인지, use는 어떤 loader를 사용하여 바꿀 것인지를 정의한다.

각각의 파일 형식에 맞는 loader를 다운받고 설정해주어야 한다.

옵션을 통해 설정도 가능하다

 

webpack.js.org/concepts/loaders/

Loaders | webpack

 

plugins

로더가 특정 타입의 모듈을 변환할 때 사용된다면 플러그인은 번들을 최적화하거나 에셋을 관리하거나 환경 변수를 삽입하는 등의 일을 하기 위해 사용된다. 

아래의 예 같은 경우에는 핫리로딩을 하기 위해 플러그인을 설치했다. 

플러그인을 사용하기 위해서는 require()을 사용하여 가져온 다음에 config 파일에 추가할 수 있고,

option을 설정할 수 있다. 

 

 

여기서 resolve extension은 개발을 편리하게 해주는 도구인데

파일을 import할 때 굳이 file 확장자 이름을 명시하지 않고도 import할 수 있게 해준다. 

주의할 점은 파일 이름이 겹칠 때에는 resolve.extensions array 순서에서 앞에 있는 파일 형식으로 resolve한다.