웹팩(webPack) + 바벨 설정하기.

1. 등장배경

 

리액트에서 클래스나 함수형 컴포넌트가 하나의 컴포넌트를 의미한다.

 

페이스북같은경우는 2만개정도의 컴포넌트가 있다고 한다.

 

컴포넌트 이거 관리하려면 너무 많아서 유지보수또한 어렵다.

 

<script src ='000.js'/> 이런식이면 중복이 발생할 수 있다.

 

그래서 중복제거하기 위해 웹팩이라는 것이 나왔다. 

 

자바스크립트 파일을 번들(합쳐줌)해준다.

 

웹펙을 하려면 노드를 알아야한다.

 

노드는 서버보다 자바스크립트 실행기로 알면 좋다. 

 

리액트에서 노드알아야한다라는 뜻은 "서버를 알아야한다 가 아니고 웹팩을 하기위한 자바스크립트

 

실행기를 알아야한다. "로 이해하면 좋다.

 

 

2. 웹팩을 알아야하는 이유

CRA(이하 "create-react-app"의 줄임말)로 하면 웹팩부터 바벨, 빌드까지 다 리액트에서 되기때문에,

 

처음부터 웹팩설정하는 방법을 모른다면 CRA만 쓰게 될것이고 CRA가 어떻게 돌아가는지 이해할 수 없을 것이다. 

 

3. 적용하기

사전에 node가 설치 되어야함!

 

 새로운 폴더를 만들고 그 안에다가 명령어로(vscode 터미널 명령어 : ctrl +` ) 또는 bash나 터미널에서

npm init

을 하고 설정(다 엔터누르고, 마지막에 yes만 쳐도된다.) package.json이 생긴다.

<수정 전>
{
  "name": "exweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"  //이 부분은 웹팩 빌드하는 방식 중에 하나를 쓰기위해서 아래와 같이 수정할 것이다.
  },
  "author": "",
  "license": "ISC"
}


---------------------------
<수정 후> d

{
  "name": "exweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {    // 이안에 있는 내용을 실행하려면 npm run script값을 입력해야 실행이 된다.
    "build": "webpack"    //ex) npm run build
  },
  "author": "",
  "license": "ISC"
}

기본적으로 이렇게 생성이 된다.

 

리액트를 쓰기위해 index.html을 하나 만들자

하단부 script 부분에 ./app.js 가 일반적으로 리액트 만들면 셋팅이 되있는데 실습을 위해 폴더하나 더 넣었다.

 

명령어로 react와 react-dom을 설치할 것이다.

npm i react react-dom  //i는 install의 약자. 띄어쓰기로 두개를 한번에 설치할 수 있다.

설치를 하면 package.json 파일에 dependencies 부분에 추가되었다. (의존성 주입)

{
  "name": "exweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

이해를 돕기위해 아래 그림과 같이 jsx 파일을 2개 만들겠다. js로 해도되는데,

 

jsx문법이 사용되었으므로 .jsx로 만들어도 무방하다. (코딩스타일의 차이)

 

아래 그림보면 react와 react-dom을 설치했기때문에 require로 불러올 수 있는 것이다.

이제는 웹팩을 적용해 보자. 

 

웹팩도 개발용에서 밖에 사용하지 않는다.

 

웹팩4 버전부터는 웹팩과 웹팩-cli(커맨드라인)을 같이 설치해주어야 한다. 

npm i -D webpack webpack-cli  //-D는 개발만사용한다. -D 대신 --save-dev 가능

{
  "name": "exweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {   //개발용 의존성
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2"
  }
}

 

root 부분에 webpack.config.js파일을 만든다. 

 

내부의 파일은 아래 그림과 같은 형식의 포맷으로 작성된다. 

작성하고 아래와 같이 채워준다. 

아래 예문 오타 : extension → extensions

JSX파일을 JS로 돌아가게 해주는 것이 바벨이고 바벨에서도 JSX를 설정을 해주어야만 한다.

 

바벨을 설치해보자.

 

바벨도 웹팩과 마찬가지로 개발용으로 쓰고 배포때는 사용하지 않는다.

@babel/core : 바벨코어
@babel/preset-env : 우리 브라우져에 최신문법지원
@babel/preset-react : JSX같은걸 지원할 수 있음
babel-loader : 바벨과 웹팩 연결해줌

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

설치하면,  package.json에 아래와 같이 나타난다.

{
  "name": "exweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2"
  }
}

바벨을 설치했으니, JSX 파일을 설정해주자.

적용을 완료했으면 화면에 띄워보자. 

 

CRA로 만들었으면 코드 수정후에 저장만 누르면 자동으로 빌드되서 화면에 나타났는데,

 

지금은 그런기능이 없으니 수작업으로 빌드를 해주어야한다.

 

빌드방법에는 간략하게 2가지 있다.

 

1. npm run build (아까 맨위에 코드에 설명)

2. npx webpack 

npx webpack

이런 에러가 나는데, 에러내용을 읽어보면 plugins : ['@babel/plugin-proposal-class-properties'] 을 하라고 나와있다.

npm i -D @babel/plugin-proposal-class-properties

{
  "name": "exweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2"
  }
}

npx webpack

플러그인까지 하고 위 명령어 치면 빌드가 되고 브라우져에서 열면

정상적으로 출력되는 것을 볼 수 있다.

 

수정할때마다 npx webpack 을 해줘야 수정된 내용을 브라우져에서 볼 수 있다.

 

4. 추가부분

이런 식으로도 presets : 부분에 세부 옵션설정 할 수 있다.

세부옵션 볼수 있는 Document : https://github.com/browserslist/browserslist

entry :{
...
},
module : {
...
},
plugins : [ //이거쓰려면 const webpack = require('webpack') ; 해줘야함.
 new webpack.LoaderOptionsPlugin({debug : true}),
],

output : {
...
}

기본셋팅에 plugins로 해서 쓸 수 있음.

 

자세한건 공식문서 Concepts참고 : https://webpack.js.org/concepts