웹팩이란

2017-04-21

웹팩이란?

최근의 웹 개발이 복잡한 자바스크립트와 대규모 의존성 트리가 포함된 다양한 기능을 갖춘 웹 어플리케이션으로 발전되면서
복잡성에 대응하기 위한 방법을 고안하게 되었다.

한 프로그램을 여러 파일의 파일로 분할하고 구성할 수 있는 자바스크립트 모듈
향후 자바스크립트에서 제공될 기능을 미리 이용할 수 있게 해주는 자바스크립트 전처리기(pre-processor)와 자바스크립트로 컴파일되는 언어(예:CoffeeScript)

이러한 방법은 아주 유용하지만 파일을 브라우저가 이해할 수 있도록 번들로 묶고, 변환(트랜스파일 및 컴파일)하는 추가 단계를 거처야 이용할 수 있다.

웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 애셋을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킬하는 모듈 번들러(module bundler) 이다.

그런트나 걸프와 같은 빌드 도구와의 차이점

웹팩은 빌드 툴이 아니므로 그런트(Grunt)나 걸프(Gulp) 등의 태스크 러너나 빌드 시스템과는 다르지만 이러한 툴을 대체하면서 장점을 제공해 준다.

그런트나 걸프 같은 빌드 툴은 정의한 경로에서 구성과 일치하는 파일을 찾는다. 따라서 구성 파일에서 이러한 파일을 변환, 조합 및 축소(minify)하는 작업이나 단계를 지정해야 한다.

자바스크립트 ES6모듈을 번들로 묶는 워크 플로우.

소스폴더(자바스크립트 ES6)
폴더에서 모든 파일을 읽음
첫번재 작업 (플러그인을 통한 처리)
JS로 트랜스 파일
파일을 저장하거나 다음 작업으로 전달
JS 모듈을 번들로 묶음
파일 저장
번들로 묶은 자바스크립트 (bundle.js)

이와 달리 웹팩은 프로젝트 전체를 한 단위로 분석한다.
즉, 지정한 메인 파일에서 시작해 자바스크립트의 require와 import 문을 참고해 프로젝트의 모든 의존성을 조사하고
로더를 이용해 처리한 후 번들로 묶은 자바스크립트 파일을 생성한다.

메인파일(entry) 에서 시작
entry와 관련된 의존성 검사 및 로더를 이용해 처리
번들로 묶은 자바스크립트 생성. bundle.js

시작하기

npm을 이용해 전역으로 설치하거나 ( npm install -g webpack ),
특정 트로젝트의 의존성으로 설치 ( npm install –save-dev webpack ) 한다.

예제 프로젝트

먼저 새로운 프로젝트 폴더를 생성하고 package.json 파일을 만든다.
package.json 파일은 프로젝트에 대한 다양한 정보를 포함하는 표준 npm 매니페스트 이다.
개발자가 의존성을 지정하고 스크립트 태스크를 정의할 수 있게 해준다.

package.json 파일 생성 방법

npm init 입력

init은 프로젝트에 대한 기본 질문들을 표시하고 최종적으로 package.json을 생성해 준다.
(잘 모르겠다는 그냥 enter를 계속 눌러도 상관없음, 수동으로 만들거나 에디터에서 수정이 가능하다.)

폴더 구조

project
– node_modules
– app
main.js
– public
index.html
package.json

구성 파일 정의

웹팩은 다양한 고급 옵션을 제공하며, 로드한 모듈에 로더와 플러그인을 이용해 변환을 적용할 수 있게 해준다.
명령줄에서 모든 옵션을 지정하고 웹팩을 실행하는 것도 가능하지만 이 방법은 추천하지 않는다.

webpack.config.js 파일 만들어 보기

module.exports = {
    devtool: 'source-map'
    entry : __dirname + "/app/main.js",
    output : {
        path : __dirname + "/public",
        filename : "bundle.js"
    }
}
//__dirname : 현재 실행 중인 스크립트가 있는 디렉터리 이름을 포함하는 node.js 전역 변수이다.

// shell
~ webpack_proj > node_modules/.bin/webpack

테스크로 바로가기 추가

node_modules/.bin/webpack 과 같은 긴 명령은 입력하기 번거롭고 잘못 입력할 가능성도 있다.
npm을 태스크 러너로 사용해 npm start와 같은 명령으로 대체할 수 있다.

package.json 파일 안에 scripts 섹션을 추가 하면 된다.

{
    "name" : "",
    "version" : "1.0.0",
    "description" : "Sample webpack project",
    "scripts" : {
        "start" : "node_modules/.bin/webpack"
    },
    ....
}

소스맵 생성.

패키지의 모든 자바스크립트 모듈을 하나(또는 소수)의 번들 파일로 만들어 브라우저에서 이용하면 많은 장점이 있지만,
브라우저에서 디버깅할 때 원래 어떤 파일의 어떤 부분에서 문제가 생겼는지 찾기가 어렵다는 단점이 있다.
이 문제를 해결하기 위해 웹팩의 소스맵(source map)을 이용할 수 있다.

소스맵 은 번들 파일 내의 코드를 원래 소스 파일로 연결함으로써 브라우저에서 코드를 읽고 디버그하기 쉽게 만들어 준다.

module.exports = {
    devtool: 'source-map'
    entry : __dirname + "/app/main.js",
    output : {
        path : __dirname + "/public",
        filename : "bundle.js"
    }
}

웹팩 개발 서버

로컬 개발을 위해 옵션으로 제공하는 서버.
웹팩 개발 서버는 정적 파일을 제공하며, 웹팩 구성에 따라 애셋을 빌드한 후 메모리에 저장했다가,
개발자가 소스 파일을 수정하면 자동으로 브라우저를 새로 고치는 간단한 node.js 익스프레스 앱이다.
(
웹팩 개발 서버는 별도의 npm 모듈이므로 의존성으로 설치해야 사용이 가능하다.
npm install –save-dev webpack-dev-server
)

devserver 설정

devserver 설정	설명
contentBase	기본적으로 웹팩 개발 서버는 프로젝트 루트에 있는 파일을 서비스한다. 다른 폴더(예:예제 프로젝트의 “public” 폴더)의 파일을 서비스하려면 이 설정으로 특정 콘텐츠 기반(content base)을 구성해야 한다.
port	사용할 포트를 지정하여, 생략할 경우 기본값은 “8080” 이다.
inline	“true”로 설정하면 작은 클라이언트 엔트리를 번들에 삽입해 페이지가 변경되면 새로 고친다.
colors	서버가 터미널에 출력하는 내용에 색상을 지정한다.
historyApiFallback	html5 히스토리 api를 이용하는 단일 페이지 어플리케이션을 개발할 때 유용한 옵션으로서 “true”로 설정하면 기존 애셋과 매핑되지 안을 웹팩 개발 서버에 대한 모든 요청이 곧바로 “/“ 루트로 (index.html)로 라우팅 된다.

module.exports = {
    devtool: 'source-map'
    entry : __dirname + "/app/main.js",
    output : {
        path : __dirname + "/public",
        filename : "bundle.js"
    },
    devServer: {
        contentBase : "./public",
        colors : true,
        historyApiFallback : true,
        inline: true
    }
}

“npm start” 를 호출해 서버를 실행할 수 있도록 프로젝트의 package.json 파일에서 “scripts” 섹션을 편집할 수 있다.

{
    "name" : "",
    "version" : "1.0.0",
    "description" : "Sample webpack project",
    "scripts" : {
        "start" : "node_modules/.bin/webpack-dev-server --progress"
    },
    ....
}
// --progress 매개변수는 명령줄에서만 사용할 수 있으며, 빌드 단계 중에 터미널에 진행 상황을 표시한다.

로더

로더를 이용하면 외부 스크립트와 도구를 통해 소스 파일을 전처리하고 다양한 변경과 변환을 적용할 수 있다.

json 파일을 일반 자바스크립트 구문 분석
es6등의 신규 문법 코드를 현재 브라우저가 이해할 수 있는 일반 자바스크립트로 변환
리엑트의 jsx를 일반 자바스크립트로 변환

로더는 별도로 설치해야 하며 webpack.config.js의 “modules” 키에서 구성한다.

- test : 로더에서 처리하기 위해 일치해야 하는 파일 확장자를 비교하는 정규식 (필수)
- loader : 로더의 이름(필수)
- include/exclude : 로더가 명시적으로 추가하거나 무시할 폴더와 파일을 수동으로 지정하는 옵션 설정.
- query : 로더에 추가 옵션을 전달하는 데 이용되는 쿼리 설정.

npm install –save json-loader

module.exports = {
    devtool: 'source-map'
    entry : __dirname + "/app/main.js",
    output : {
        path : __dirname + "/public",
        filename : "bundle.js"
    },
    module : {
        loaders : [
            {
                test : /\.jsx?$/,
                loader : 'json'
            }
        ]
    }
    ...
}

바벨

자바스크립트 컴파일과 도구 지원을 위한 플랫폼 이다.

아직 일부 브라우저에서 지원되지 않은 자바스크립트의 다음 버전(es6, es7등)을 이용할 수 있게 해준다.
리액트의 jsx와 같은 자바스크립트 구문 확장을 이용할 수 있게 해준다.

바벨은 독립 실행형 도구지만 로더로 이용할 수 있으며, 웹팩과 잘 어울린다.

설치와 구성.

바벨은 모듈형 구조를 띠며, 다양한 npm 모듈로 배포된다. 핵심 기능은 “babelcore” npm 패키지로 제공되며,
웹팩과의 통합은 “babel-loader” npm 패키지로 제공된다.
자주 사용되는 패키지로는

babel-preset-es2015 : es6 컴파일용
babel-preset-react : react jsx 지원

다른 웹팩 로더와 마찬가지로 바벨도 웹팩 구성 파일의 모듈 섹션에서 구성할 수 있다.

module.exports = {
    ...
    module : {
        loaders : [
            {
                test : /\.json$/,
                loader : 'json'
            },
            {
                test : /\.jsx?$/,
                exclude : /node_modules/,
                loader : 'babel',
                query : {
                    presets : ['es2015', 'react']
                }
            }
        ]
    }
    ...
}

바벨 구성 파일

바벨을 webpack.config.js에서

가지가지하는 블로그

javascript