webpack
번들러를 사용하면 모듈 지원이 불가한 브라우저에서의 의존성 관리 문제를 해결할 수 있다. 최근 번들러들은 의존성 패키지들의 하나로 묶어 주는 것뿐만 아니라 개발 생산성 자체에 도움을 주는 다양한 기능을 제공한다.
webpack은 가장 많이 사용되는 번들러 중 하나이다. CommonJS, AMD, ES2015 모듈 포맷을 모두 지원하며 여러 자원에 대한 의존성을 함께 관리해준다. 또한 Loader와 Plugin을 통해 번들링 외에도 다양한 기능을 제공한다.
webpack을 쓰는 이유?
- 웹팩을 여러 개의 파일을 하나로 번들링하기 때문에 HTTP 요청 횟수를 줄일 수 있다.
- 코드 스플리팅을 지원한다.
- 애플리케이션이 커지면 번들 파일의 크기도 증가하게 된다. 그렇기 때문에 번들 파일이 클수록 사용자는 느리게 렌더링되는 화면을 볼 가능성이 높다. 초기 로딩 시 번들 파일의 용량 증가를 막을 수 있는 좋은 방법 중 하나는 페이지마다 필요한 코드만 로딩하도록 코드를 잘게 나누는 것이다. 코드 스플리팅을 통해 쪼개진 번들 파일들은 필요한 때만 로딩할 수 있으며, 이 과정을 병렬로 진행할 수도 있다.
코드 스플리팅 방법
- entry 설정을 이용하는 방법
- 기존 entry나 새로운 청크의 공통 의존성을 SplitChunksPlugin을 통해 제거하고 분할하는 방법
- Dynamic Import를 이용해 모듈에서 코드를 나누는 방법
entry 와 output
webpack은 모든 것을 모듈로 다룬다. js, css, 이미지와 같은 리소스들도 모두 모듈로 로딩하여 사용한다. 이러한 작업은 webpack의 loader를 통해 이뤄진다.
모듈 간의 의존성에는 시작점이 존재하게 되는데 webpack에서는 그 지점을 entry로 설정한다. 그리고 번들링의 결과가 저장될 파일의 경로나 파일명은 output 옵션으로 설정한다.
한 개인 경우에는 문자열로 작성하며, 여러 개일 경우에는 객체나 배열로 작성할 수 있다.
const path = require('path')
module.exports = {
entry: "./dist",
output: {
path: path.join(__dirname, './public'),
filename: '[name].[contenthash].js',
}
}-
entry: "./dist",
현재 진행하고 있는프로젝트에서의 시작점을 dist 폴더로 지정해주었다. dist 폴더에 있는 js파일들이 진입점이 된다. -
path: path.join(__dirname, './public'),
output옵션을 설정하면 번들링 결과가 저장될 경로를 지정할 수 있다. path 옵션을 통해 저장될 파일의 경로를 지정한다. public 경로에 저장되도록 설정하였다. -
filename: '[name].[contenthash].js',
webpack 내부 플러그인을 통해 이름을 변환해주는 템플릿 스트링을 사용했다. 청크(Chunk)의 이름 혹은 ID를 나타내는 [name]과 청크를 기준으로 해시값을 생성해주는 [contenthash]를 활용해 번들 파일의 이름을 만들었다.
Loader
webpack은 기본적으로 js파일과 json 파일만을 이해한다. 하지만 webpack의 Loader 옵션을 사용하면 이미지나 CSS 파일을 모듈 형태로 작성하여 가져올 수 있다. 번들링 과정에서 Loader가 이러한 자원들을 자바스크립트로 변환해주기 때문이다.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|gif)$/i,
use: ['file-loader'],
},
],
},
}Plugin
Plugin은 번들 파일이 생성되는 방식을 수정할 수도 있으며, 환경 변수 주입, 난독화 및 압축과 같은 작업을 수행한다.
HtmlWebpackPlugin
- HTML 파일에서 번들링 결과로 생성된 번들 파일을 사용하려면
<script>태그를 사용하여 추가해야 한다. 하지만 번들 파일명에 hash 값이 포함되거나 파일명이 자주 변경된다면 매번<script>태그에서 파일명을 수정하기 번거로울 것이다. HtmlWebpackPlugin을 사용하면 이런 비효율적인 작업을 자동화할 수 있다. HtmlWebpackPlugin은 번들 파일을 포함하는 HTML파일을 자동으로 수정해주기 때문에 번들 파일 주입에 대해 신경 쓸 필요가 없다.
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
}번들링을 실행하면 public 경로에 index.html 파일이 생성된다.
webpack-dev-server
webpack을 사용한 번들링 결과는 번들링할 때마다 브라우저에서 새로 고침을 하여 확인해야 한다. 하지만 이런 방식은 실제 배포되는 웹 서버 환경과 다를 수 있으며, 매번 브라우저에서 수정된 사항을 새로 고침하는 것은 개발 생산성에도 좋지 않다.
webpack-dev-server은 webpack의 빌드 대상 파일이 변경되었을 때 번들링을 실행한 후 브라우저를 자동으로 새로 고침해주며, 실제 배포되는 서버와 비슷한 환경을 만드는 기능도 제공한다.
// package.json
{
"script": {
"serve": "webpack serve"
}
}// webpack.config.js
module.exports = {
devServer: {
static: './dist',
hot: true,
},
}개발 서버에 대한 설정은 webpack 설정 파일의 devServer 옵션에서 정의할 수 있다.
DEMO
빌드 후, 파일을 살펴보면 하나의 js 파일로 압축되어있는 것을 볼 수 있다.
