최신 웹 생태계에서는 번들러가 필수적이다
typescript, scss를 파싱해야하며
코드의 압축, 난독화를 진행하기위해서도
번들러를 쓰게된다
그 중에서도 가장 인기있고
계속 업데이트 되고있는 Webpack에 대해 알아본다
핵심 4가지 요소
Webpack의 구성요소는 아래의 4개로 나눠볼 수 있다.
1. entry
2. output
3. loader
4. plugin
entry
entry는 webpack에서 웹 자원을 변환하기 위해
필요한 최초의 진입점이자, javascript 파일 경로다.
즉, entry에서 지정한 파일 경로를 대상으로
webpack이 빌드를 진행한다.
entry(진입점)가 되는 js에는
웹 어플리케이션의 전반적인 구조와 내용이 담겨있어야 한다.
SPA가 아닌 경우 object형태로 여러개의 진입점을
형성해두는것도 가능하다.
// 예시
module.exports = {
entry: './src/index.ts',
}
output
output은 webpack이 빌드를 진행한 후
결과물들을 어디에 만들것인가, 즉 파일 경로를 의미한다.
output은 entry와 달리 object 구조를 갖는다.
(filename, path 등의 속성을 갖음)
output은 파일 경로를 의미하기 때문에 최소한
filename은 지정해주어야 한다.
filename을 지정함에 있어 4가지 옵션을 적용할 수 있다.
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: [name].bundle.js,
// filename: [id].bundle.js
// filename: [name][hash].bundle.js
// filename: [chunkhash].bundle.js
}
}1. name: entry 속성과 같은 이름을 적용
2. id: 웹팩 내부적으로 모듈 ID를 적용
3. name,hash: 매 빌드시 마다 고유 해시 값을 적용
4. chunkhash: 웹팩의 각 모듈 내욜을 기준으로 생성된 해시값을 붙임
위 내용들이 제법 중요하다.
실제로 프로덕트를 운영하다보면 새 코드를 배포후
새로고침 하였을때, 즉시 적용되지 않는 경우가 발생한다.
코드가 바뀌었음에도 파일명이 변하지않아
기존 브라우저 캐시로 인해 업데이트 사항을 인식하지 못하는 케이스다.
사용자가 강제 새로고침을 통해 해결할 수 있지만...
그런 사용자가 얼마나 있겠는가, 파일 버전관리를 잘해주어야한다.
loader
webpack이 웹 어플리케이션을 해석할 때,
js가 아닌 웹 자원들을 변환하려면 loader를 적용해주어야한다.
(웹 자원: html, css, image, font 등)
loader는 module이라는 속성명을 갖는다.
module 속성 내 rules에 배열 구조로
loader를 설정하게된다.
rule은 test, use의 속성을 갖는다.
test는 loader를 적용할 파일 유형이고,
use는 해당 파일에 적용할 loader의 이름이다.
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: [name].bundle.js,
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
option: {
module: true
}
},
{ loader: 'sass-loader' }
]
},
{
test: /\.ts$/,
use: 'ts-loader'
}
]
}
}주로 많이 사용하는 loader로는
babel-loader, sass-loader, file-loader, ts-loader 등이 있다.
위 예시에서 보는것 처럼 하나의 rule에
여러개의 loader를 설장할수도 있는데, 이 때 loader의 순서도 매우 중요하다.
loader는 코드 순서 상, 기본적으로 우 -> 좌 (아래 -> 위)로 적용한다.
예시로 보면 sass-loader > css-loader > style-loader 순으로 적용된 다는것이다.
plugin
웹팩의 기본적인 동작 외에,
추가적인 기능을 제공하기 위한 특성이다.
plugin 속성에 배열 구조로 값을 받는다.
plugin은 생성자 함수로 생성된 인스턴스 객체만을 추가할 수 있다.
주로 사용되는 plugin으로는
split-chunk-plugin, clean-webpack-plugin, image-webpack-plugin 등이 있다.
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: [name].bundle.js,
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
},
plugin: [
new webpack.progressPlugin(),
new htmlWebpackPlugin({ template: './public/index.html' })
]
}
webpack의 동작 방식
지금까지 webpack 설정을 위한 구성요소를 알아봤다면
마지막으로 동작방식에 대해 알아본다.
1. webpack이 entry에서 부터 해석을 시작
2. 해석에 있어 각 loader들을 적용한다.
3. loader를 적용한 결과물을 산출한다.
4. 산출된 결과물에 plugin을 적용한다.
5. 산출된 결과물이 output 경로에 생성된다.
'개발, 코딩' 카테고리의 다른 글
| git 기본기_백과사전 (1) (0) | 2022.10.24 |
|---|---|
| git 협업하기 - 실무편 (0) | 2022.10.23 |
| Rest API 정리 (0) | 2022.09.29 |
| java zulu jdk11 설치 (0) | 2022.07.31 |
| M1 Mac, homebrew install (Warning: /opt/homebrew/bin is not in your PATH.) (0) | 2022.07.31 |