웹사이트를 구성할때 .js .css .images 파일등 수 많은 들이 모여 웹사이트를 구성
따라서 웹사이트에 접속했을때 굉장히 많은 파일이 다운로드될 수 있는데 이것에 비례하여 서버의 자원을 소모하고 웹사이트가 느리게 로딩됨
또한, 많은 자바스크립트 패키지등을 사용하다보면 각각의 서로 다른 패키지들이 서로 같은 이름이나 함수를 사용가능성
이러한 현상을 해결하기 위해 나온 파일을 묶는다는 개념의 번들러
- Webpack
- Broserify
- Parcel
과 같은 툴들이 번들러에 속함
Webpack은 그 중 가장 인기 있는 번들러
Webpack의 정의
webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러
모듈 번들러란? 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구
여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러
Webpack의 배경
많은 파일이 모여서 웹사이트를 구성
웹 앱의 복잡도는 증가
자바스크립트의 코드의 양이 방대해짐
많은 양의 코드들을 쉽게 유지보수하기 위해 모듈로 관리하는 방법이 요구됨
자바스크립트에서는 ES2015(ES6) 이전에는 모듈로서 관리하는 방법으로 AMD, CommonJs 등이 존재했으나 하나의 표준이 아닌 사용하는 사람에 따라 원하는 것을 선택하는 방식으로 사용
그 후, ES6 이후부터 자바스크립트에서 표준 모듈 시스템을 제안하였고 이것이 export/import 방식
그러나 모든 모든 브라우저에서 ES6 방식의 모듈 시스템을 지원하지는 않았다. 따라서 개발자들은 브라우저와 버전에 상관없이 편리한 모듈 시스템을 사용하기르 원했고 이러한 배경에 의해 등장하게된 툴이 웹팩
Webpack의 핵심 요소
- Entry
- Output
- Loader
- Plugin
1. Entry
웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점
entry로 묶고자하는 파일의 첫번째 진입점을 설정
// webpack.config.js
// Single Page Application(SPA)
module.exports = {
entry: './src/index.js'
}
// Multi Page Application (MPA)
module.exports = {
entry: {
login: './src/LoginView.js',
main: './src/MainView.js'
}
}2. Output
웹팩을 실행하여 빌드하고 난 후 결과물의 파일 경로
filename 속성은 웹팩으로 빌드한 파일의 이름을 의미하며 여러가지 옵션을 넣을 수 있으며 path 속성은 해당 파일의 경로
path 속성에서 사용된 메서드는 인자로 받은 경로를 조합하여 유효한 파일 경로를 만드는 Nods.js API
// webpack.config.js
var path = require('path');
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
}
}
/* Node.js API가 하는 역할은 아래 코드와 동일하다. */
output: './dist/bundle.js'3. Loader
웹팩이 애플리케이션을 해석할때 자바스크립트 파일이 아닌 HTML, CSS, Images, font 등을 변환할 수 있게 도와주는 속성
웹팩은 모든 파일을 모듈로 취급하여 관리하는데 사실상 자바스크립트 파일만 알고 있어 로더를 이용해 다른 파일들을 웹팩이 이해하게끔 변경
사실상 로더로 설정을 지정해주지 않으면 웹팩이 해당 파일을 읽을 수 없기 때문에 에러가 발생
보통 사용되는 로더 종류
- CSS Loader
- Babel Loader
- Sass Loader
- File Loader
- Vue Loader
- TS Loader
아래와 같이 rules라는 객체로 속성을 지정하며
test => 로더를 적용할 파일 유형 (일반적으로 정규 표현식)
use => 해당 파일에 적용할 로더의 이름
아래 코드는 해당 프로젝트의 모든 CSS 파일과 TS파일에 대해서 로더를 적용하겠다는 의미로 해석
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' },
// ...
]
}
}4. Plugin
웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성
로더랑 역할을 비교해보자면
로더: 파일을 해석하고 변환하는 과정
플러그인: 해당 결과물의 형태를 바꾸는 역할
- HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
- ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인
// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new webpack.ProgressPlugin()
]
}Reference
