개발 환경 구성
기본환경 구성
- 웹팩 관련 라이브러리 설치
npm i webpack webpack-cli -D- 프로젝트 폴더 루트 레벨에 webpack.config.js 파일 생성 후 아래 내용 추가
// webpack.config.js
var path = require('path')
module.exports = {
mode:'none',
entry:'./src/index.js',
output:{
filename:'main.js',
path: path.resolve(__dirname,'dist')
}
};- package.json 파일에 script 수정
"script":{
"build":"webpack"
}웹팩의 4가지 주요 속성
웹팩의 빌드 과정을 이해하기 위해서는 아래 4가지 주요 속성에 대해 알고 있어야 합니다.
- entry
- output
- loader
- plugin
Entry
entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로입니다.
module.exports = {
entry:"./src/index.js"
}entry 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져있어야 한다.
위와 같은 SPA 구조에서는 entry point가 1개지만, 아래와 같이 여러 개가 될 수 있습니다.
entry:{
login:"./src/LoginView.js",
main:"./src/MainView.js"
}Output
output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미한다. output 속성은 entry 속성과 다르게 객체 형태로 옵션들을 추가해야 한다. 최소한 filename은 지정해줘야 하며 일반적으로 아래와 같이 path 속성을 함께 정의한다.
const path = require('path');
module.exports = {
output:{
filename:'bundle.js'
path:path.resolve(__dirname,'./dist')
}
}앞에서 살펴본 filename 속성에 여러 가지 옵션을 넣을 수 있습니다.
module.exports = {
output:{
// 1. 결과 이름에 entry 속성을 포함하는 옵션
filename:'[name].bundle.js'
// 2. 결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션
filename:'[id].bundle.js'
// 3. 매 빌드시 마다 고유 해시값을 붙이는 옵션
filename:'[name].[hash].bundle.js'
// 4. 웹팩의 각 모듈 내용을 기준으로 생성된 해시 값을 붙이는 옵션
filename:'[chunkhash].bundle.js'
}
}Loader
로더는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립크 파일이 아닌 웹 자원(HTML, CSS, Images, Font) 등을 변환할 수 있도록 도와주는 속성이다.
module.exports = {
module:{
rules:[]
}
}loader는 module 이라는 이름을 사용한다.
예를 들어 .css 파일을 import하여 사용하기 위해서는 css-loader가 필요하다.
npm i css-loader -Dmodule.exports = {
entry:'./app.js',
output:{
filename:'bundle.js'
},
module:{
rules:[
{
// test 속성은 로더를 적용할 파일 유형 (일반적으로 정규표현식 사용) 이다.
test:/\.css$/,
// use 속성은 해당 파일에 적용할 로더의 이름이다.
use:['css-loader']
},
{test:/\.ts$/, use:['ts-loader']}
...
// 로더는 오른쪽에서 왼쪽으로 적용되므로 순서에 유의하여 작성해야 한다.
// 아래는 1️⃣sass-loader가 scss파일을 css파일로 변환한 뒤
// css 파일을 인식할 수 있게 2️⃣css-loader를 적용하는 예시이다.
{
test:/\.scss$/,
use:['css-loader','sass-loader']
}
]
}
}Plugin
플러그인은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다.
플러그인은 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다.
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins:[
new HtmlWebpackPlugin(),
new webpack.ProgressPlugin()
]
}- HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
- ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인
자주 사용하는 플러그인
