티스토리 뷰
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.
'Language > Node.js' 카테고리의 다른 글
javascript ecma6 function lambda표현법 (0) | 2016.10.31 |
---|---|
React Webpack을 하려면 필요한 것들 (0) | 2016.10.29 |
javascript null과 undefined의 차이점 (0) | 2016.10.01 |
javascript sort, 다중 조건 sort (0) | 2016.09.28 |
javascript class생성 및 member filed에 값 binding 그리고 member 출력 (0) | 2016.09.18 |
- Total
- Today
- Yesterday
- Linux
- 이직
- 도커각티슈케이스
- 싱가폴
- vim
- docker container tissue box
- 개발자
- 도커티슈박스
- docker container whale
- Sh
- 도커티슈케이스
- docker container
- shellscript
- 도커컨테이너
- docker container case
- 도커각티슈박스
- 2017 티스토리 결산
- docker container tissue
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |