webpack
JavaScript 모듈화를 지원하기 위해 태어난 도구. 프레임웤.
webpack 은 모듈 시스템 지원 외에도, 로더, 빠른 컴파일 속도 등 장점이 많다.
Node.js 가 설치된 환경에서 실행되는데, 사용법은 아래와 같다.
npm install webpack -g
webpack이 설치되면 엔트리 파일 및 번들 파일 형식으로 명령어를 실행하여 모듈을 컴파일 한다.
webpack ./entry.js bundle.js
webpack 은 컴파일 시 엔트리 파일을 시작으로, 디펜던시가 있는 다른 파일들을 엮어서 하나의 번들 파일을 만든다.
이 묶여진 번들 파일을 HTML 에서 로딩하기만 하면 전체 모듈을 사용할 수 있다.
엔트리 파일이 여러개 일 경우는 엔트리 파일마다 번들 파일이 생성된다.
컴파일 시 --watch 옵션을 사용하면, 모듈이 변경됨을 감지하여 자동으로 컴파일 한다.
webpack --watch ./entry.js bundle.js
webpack config
webpack 을 사용하여 컴파일 할 때 명령어 옵션이 많거나 입력할 내용이 많으면 매우 불편하다.
따라서 이런 입력 내용들을 설정 파일을 만들어 관리 할 수 있다.
module.exports = {
context: __dirname + '/app', // 모듈 파일 폴더
entry: { // 엔트리 파일 목록
app: './app.js'
},
output: {
path: __dirname + '/dist', // 번들 파일 폴더
filename: '[name].bundle.js' // 번들 파일 이름 규칙
}
}
이런 형태로 webpack.config.js 파일을 작성하고 아래와 같이 명령어만 입력하면 컴파일이 된다.
webpack
로더
webpack 은 다양한 로더 라이브러리를 지원한다.
예를들면 less 로더는 .less 파일을 순수 스타일 파일인 .css 로 로딩할 수 있도록 도와준다.
vue 로더는 .vue 파일을 순수 HTML + JavaScript + CSS 파일로 로딩할 수 있도록 도와준다.
ECMAScript 2015 를 사용할 수 있게 컴파일 하는 Babel 도 사용할 수 있다.
참고
'WEB > Webpack' 카테고리의 다른 글
| webpack 주요 컨셉 알아보기 (0) | 2019.01.16 |
|---|