react webpack(웹팩) build과정

react webpack(웹팩) build과정

Webpack이란?

여러개의 .js파일을 한개의 파일로 합칠때 쓴다.

예를들어 react, react-dom, react-router, redux, 내가 만든 모듈1, 내가 만든 모듈2 ····· 내가만든 모듈 30 이렇게 34개를 사용하는 웹 앱을 만들었을 경우 이걸 압축 & 빌드 해서 배포를 해야 하는 경우에 사용한다.

압축 & 빌드를 왜 해야 하냐면 요즘은 모듈별로 쪼개서 웹앱을 만들고 사용자가 해당 웹앱에 접근을 할 때 파일이 여러개로 나누어져 있으면 전송되는 양도 그만큼 커지기 때문에 느리고, 브라우저 내부적으로 빌드를 해야 한다면 시간이 오래 걸리기 때문이다.

초기에는 js 라이브러리를 사용 할 때는 <script src="" /> 이 코드를 넣어서 해당 라이브리리를 받았는데 이 방법은 라이브러리가 여러개일 경우 예를들어 위에서 경우 처럼 34개인 경우 다 써주고 일일히 관리 하기가 매우 어렵기 때문이다.

간단 Webpack 튜터리얼.

목표 : 두개의 js 파일 hello.js, data.js를 webpack으로 빌드 하여 app.bundle.js를 만드는 것. 2개를 할 수 있으면 3개도 4개도 가능하다.

webpack으로 빌드를 해서 app.bundle.js를 만들었으면 hello.js, data.js 가 없어도 해당 로직이 작동한다.

순서는 아래와 같다.

1.Node.js 설치

2.npm install 로 webpack 설치

3.npm install로 관련 node mobule들 설치

4.hello.js, data.js만들기

5.webpack --watch 로 build 실행

6. node app.bundle.js 로 빌드한 파일 실행

프로젝트 구조

├── src              

│   ├── hello.js     

│   ├── data.js       ├── script           

│   ├── app.bundle.js ├── package.json     

세부 진행

c:\practice\webpack_01 만듬

project 초기화

npm init

webpack설치 -g는 글로벌

npm install webpack -g

require("./data.js"); 로 module.export [1, 2]; 한 file 불러오는 것 만들 예정

'src'랑, 'script디렉토리 만듬

/src/hello.js 만들고 node ./src/hello.js에 console.log("hello"); 를 출력하는 app만듬

sublime text3 node build 세팅

{

    "shell_cmd": "taskkill /F /IM node.exe & node ${file}" 

}

src/data.js 생성

module.exports = [1, 2];

require로 ./data.js 추가

이제 webpack으로 빌드를 해보자.

webpack으로 build를 하려면 webpack.config.js 를 만들어야 한다.

webpack.config.js

module.exports = {

entry:"./src/hello.js",

output:{

path:"./script",

filename:"app.bundle.js"

}

}

webpack.config.js는 root(webpack_01아래)에 만든다. 

윈도우 + r 눌러서 cmd 띄우고

c:\practice\webpack_01로 이동한다.

webpack 이라고 치면 빌드가 된다.

빌드가 잘 되면 이런 화면이 나온다.

/script/에 가보면 app.bundle.js가 생겨있다.

실행은 node ./script/app.bundle.js 로 한다.

잘 실행이 된다.

end.