자동빌드, 웹팩

리액트 도구를 사용한 자동빌드

지금까지는 자바스크립트 라이브러리를 읽어드렸지만 컴파일하는데 시간이걸림

그래서 컴파일 해두는 방법이 있다.

create-react-app 설치

npm install -g create-react-app
//-g옵션 > 전역모듈 
create-react-app 내프로젝트이름 
cd 내프로젝트이름 
npm start 

프로젝트 실행

해당 디렉터리 내부에 파일이 압축되어 생성

npm run build

빌드가 제대로 되었는지 확인하려면 웹서버가 필요함 서버 설치

npm install -g serve 

웹서버 실행

server -s build

웹팩으로 리소스 파일 변환하기

웹팩이란?

자바스크립트 또는 css등의 리소스 파일을 하나로 합쳐주거나 , jsx로 작성된 파일을 변환하는 도구

최적의 형태로 변환해준다.

웹팩설치

npm install -g webpack

사용예시

webpack aa.js out/aa.js 
#웹팩으로 말기 
node out/aa.js
#실행보변 파일이 변환되어있다. 

설정파일 만들기

webpack.config.js라는 설정파일 만들고 작업 지정을 한다.

module.exports = {
    entry : '/main.js',
    output: {
        filename : 'out/aa/js'
    }
}

webpack
#웹팹 실행 
node out/aa.js
#결과 확인 

webpack --config webpack.config.js 
# 옵션 붙여서 설정파일 지정할 수 있다.