| <colbgcolor=#2b3a42><colcolor=#fff> 웹팩 webpack | |
| | |
| 종류 | 모듈 번들러 |
| 라이선스 | MIT 라이선스 |
| 언어 | JavaScript |
| 버전 | 5.90.1 |
| 링크 | |
[clearfix]
1. 개요
자바스크립트 기반의 모듈[1] 번들러이다. 웹 어플리케이션 개발에 필요한 다양한 요소(HTML, CSS, Javascript, Images, Font 등...)들을 하나의 파일로(혹은 여러 개의 파일로) 병합 및 압축을 해주는 역할을 한다. 주요한 요소로는 Entry, Output, Loaders, Plugins, Mode, Browser Compatibility가 있다.2. 사용
2.1. 설치
기본적으로 Node.js가 설치되어 있다면, npm을 통해서 다운 받을 수 있다.$ npm install -dev webpack
Node.js의 비공식 매니저인 yarn으로도 설치할 수 있다.
$ yarn add webpack --dev
2.2. 설정
webpack.config.js 라는 이름의 파일로 webpack의 사용자 정의의 설정을 할 수 있다.#!syntax javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
다음과 같이 파일을 설정한 뒤에 터미널에서 실행시키면 bundle.js 라는 결과물이 나오게 된다.
Node.js로 구현된 서버와 클라이언트가 한 프로젝트 내부에 존재해서 양측의 설정이 별도로 필요하거나, 혹은 개발용 설정과 배포용 설정을 구분하고자 하는 등 다수의 설정 파일이 필요한 경우 아래와 같이 만들어 사용할 수 있다.
webpack --config webpack.config.server.dev.js
webpack --config webpack.config.server.prod.js
webpack --config webpack.config.client.js
각각의 config.js 파일들은 별개의 JavaScript 모듈로 취급될 수 있으므로 공통된 부분을 하나의 config 파일(가령 webpack.config.base.js)로 분리하여 이를 다른 파일에서 require함으로써 코드 재사용성을 높일 수도 있다.
2.3. 설정 요소
Entry{{{#!syntax javascript
module.exports = {entry: './path/to/my/entry/file.js',
};}}}
엔트리 포인트는 webpack이 빌드될 때 최초의 진입점이자, 의존성 그래프의 시작점이라고 생각하면 된다. 의존성을 생각할 때, 페이지가 여럿으로 나뉜다면 다음과 같이 여러 개의 엔트리 포인트를 설정할 수 있다.
#!syntax javascript
entry: {
APage: './src/AScript.js',
BPage: './src/BScript.js',
CPage: './src/CScript.js'
};
Output
#!syntax javascript
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};
아웃풋은 웹팩을 사용하고 나서 나오는 결과물에 대한 설정이다. path는 결과물의 위치, filename 결과물의 파일 이름을 설정하는 요소이다. 지금 설정으로 폴더 이름은 dist, 번들 파일 이름은 my-first-webpack.bundle.js이다. 이 번들 파일을 script로 연결시키면 된다.
그 외의 Output의 결과 파일의 charset, 파일이름 템플릿 설정, chunk 설정 요소는 공식문서를 참조해주세요. 공식문서
Loaders
#!syntax javascript
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
로더는 자바스크립트 파일이 아닌 애플리케이션의 요소들을 번들링할 때, 이것들을 변환하는데 있어서 적용할 일종의 변환 규칙들이다. 여러 타입의 파일을 처리하고, 애플리케이션에서 사용하게 변환하고, 의존성 그래프에 추가한다. 예시에서 test 요소는 규칙이 적용될 파일을 가르키는데 예시에서는 .txt 파일에 적용되는 것이다. 그 적용되는 규칙은 raw-loader이다.
로더를 불러오는 방법으로는 3가지가 있다.
- 설정파일 (추천하는 방법)
- 인라인
- CLI
Plugins
#!syntax javascript
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
플러그인은 webpack을 위한 확장 기능입니다. 넓게 보면 번들 최적화, 에셋 관리, 환경요소 주입 등의 일들에 있어서 도움을 준다.
플러그인를 사용하는 방법으로는 2가지가 있다.
- 설정파일 (추천하는 방법)
- Node API
Mode
#!syntax javascript
module.exports = {
mode: 'production',
};
모드는 빌드때에 맞는 상황에 맞추어서 최적화 요소를 제공해주는 webpack 4 버전에 생긴 기능입니다. 디폴트는 production이다.
모드 요소에 의한 설정값들에 대해서는 공식문서를 참조해주세요. 공식문서
Browser Compatibility
다양한 브라우저을 위해서 ES5 문법 지원을 도와주는 요소입니다. (IE8 버전과 그보다 낮은 버전들은 지원하지 않습니다.)
3. 기타
- 원리는 JavaScript 코드를 파싱하여 AST(Abstract Syntax Tree)를 생성하여서, 각 모듈을 즉시 실행 함수(IIFE) 내에서 격리하여 네임스페이스 충돌을 방지하여 나눕니다. 그리고 의존성 그래프를 기반으로 모든 모듈을 단일 파일로 결합합니다.
- React의 CRA(Create-React-App) 사용하여 구성할 때 자동으로 설치된다.
- webpack 끼리 merge 할 수 있도록 도와주는 라이브러리도 존재한다. 이를 이용해 설정파일들을 경우에 따라 선택해서 번들링을 진행할 수 있다.
- 번들링이 된 파일에서 에러가 나는 부분을 찾기 위해서는 소스 맵(Source Map)을 설정할 수 있다. 이 소스 맵을 통해 원본 파일과 빌드 파일 사이에 위치를 알 수 있다.
- 나무위키에서도 사용한다. 다만 스크립트가 난독화되어있기 때문에 바로 눈치채기는 어렵다.
- Webpack 팀이 Vercel 에 합류하면서 Rust 기반으로 새롭게 다지고 있는 Turbopack 을 개발하고 있다. 현재 Vercel 의 주력 프레임워크인 Next.js 에서 도입 중이며, 현재 베타 단계.