웹팩
- 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러
- 모듈 번들러 : 웹 애플리케이션을 구성하는 자원(HTML,CSS,JS, Images 등)을 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구
웹팩에서의 모듈
웹 애플리케이션을 구성하는 모든 자원을 의미 (HTML, CSS, JS등 )
모듈 번들링
웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작
빌드, 번들링, 변환은 모두 같은 의미.
웹팩이 필요한 이유
- 파일 단위의 js 모듈 관리의 필요성
- 웹 개발 작업 자동화 도구
- 웹 서버 배포시 HTML,CSS,JS 압축, 이미지 압축, CSS 전처리기 변환과 같은 작업을 해야하는데 이런 일을 자동화 해 주는 도구 등장
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
- 필요한 자원을 모두 한번에 로딩하지 않고 필요할 때 마다 요청하자는 웹팩의 철학
웹팩의 속성
entry
웹 자원을 변환하기 위해 필요한 최초 진입점이자 js파일 경로
// webpack.config.js
module.exports = {
entry: './src/index.js'
}
위 코드는 웹팩을 실행했을 때 src 밑의 index.js을 대상으로 웹팩이 빌드를 수행하는 코드.
Entry 파일에 들어가야 하는 내용
- 웹 애플리케이션의 전반적인 구조와 내용이 담겨있어야 함.
- 웹팩이 해당 파일을 가지고 애플리케이션에서 사용되는 모듈과의 연관 관계를 이해하고 분석하므로 애플리케이션을 동작시킬 수 있는 내용들이 담겨야 함.
// index.js
import LoginView from './LoginView.js';
import HomeView from './HomeView.js';
import PostView from './PostView.js';
function initApp() {
LoginView.init();
HomeView.init();
PostView.init();
}
initApp();
index.js 파일에서 메인화면, 게시글 작성 화면 등 필요한 파일들을 임포트 해서 사용.
웹팩을 실행하면 해당 파일들의 내용까지 해석하여 빌드한다.
디펜던시 그래프 (Dependency Graph) : 모듈 간의 의존 관계가 생기는 그래프
entry 유형
엔트리 포인트는 1개 이상이 될 수도 있다.
entry: {
login: './src/LoginView.js',
main: './src/MainView.js'
}
위와 같이 엔트리 포인트를 분리하는 경우는 SPA보다는 서버에서 해당 정보를 내려주는 멀티 페이지 애플리케이션에 적합하다.
output
output은 웹팩을 돌리고 난 결과물의 파일 경로
// webpack.config.js
module.exports = {
output: {
filename: 'bundle.js'
}
}
entry와 다르게 객체 형태로 옵션들을 추가해야 한다.
Output 속성 옵션 형태
최소한 filename은 지정해야 하며 일반적으로 path속성을 함께 정의
// webpack.config.js
var path = require('path');
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
}
}
- filename : 웹팩으로 빌드한 파일의 이름
- path : 해당 파일의 경로
- path 속성에 사용된 path.resolve() 코드는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API
Output 파일 이름 옵션
- 결과 파일 이름에 entry 속성을 포함하는 옵션
module.exports = {
output: {
filename: '[name].bundle.js'
}
};
- 결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션
module.exports = {
output: {
filename: '[id].bundle.js'
}
};
- 매 빌드시 마다 고유 해시 값을 붙이는 옵션
module.exports = {
output: {
filename: '[name].[hash].bundle.js'
}
};
- 웹팩의 각 모듈 내용을 기준으로 생성된 해시 값을 붙이는 옵션
module.exports = {
output: {
filename: '[chunkhash].bundle.js'
}
};
loader
로더는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML,CSS,Images, 폰트 )들을 변환할 수 있도록 도와주는 속성.
module이라는 이름 사용
// webpack.config.js
module.exports = {
module: {
rules: []
}
}
CSS Loader 적용
css를 임포트한 파일을 웹팩으로 빌드하면 에러가 난다. 이를 해결하기 위해서 css파일을 해석하기 위한 적절한 로더를 추가해야한다.
npm i css-loader -D
// webpack.config.js
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\\.css$/,
use: ['css-loader']
}
]
}
}
- rules에 배열 객체 등록
- text : 로더를 적용할 파일 유형 ( 일반적으로 정규표현식 )
- use : 해당 파일에 적용할 로더의 이름
자주 사용되는 로더
여러개의 로더 사용시 rules 배열에 로더 옵션을 추가해준다.
module.exports = {
module: {
rules: [
{ test: /\\.css$/, use: 'css-loader' },
{ test: /\\.ts$/, use: 'ts-loader' },
// ...
]
}
}
로더 적용 순서
특정 파일에 대해 여러개의 로더를 사용하는 경우 순서에 주의해야한다.
기본적으로 오른쪽에서 왼쪽 순으로 적용된다.
module: {
rules: [
{
test: /\\.scss$/,
use: ['css-loader', 'sass-loader']
}
]
}
scss 파일에 대해 Sass 로더로 전처리를 한 다음 웹팩에서 CSS파일을 인식할 수 있게 로더를 적용하는 코드.
웹팩으로 빌드한 자원으로 실행했을 때 해당 CSS 파일이 웹 애플리케이션에 인라인 스타일 태그로 추가되는 것을 원한다면 style로더도 추가 가능.
{
test: /\\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
배열로 입력하는 대신 아래와 같이 옵션을 포함한 형태로도 입력 가능.
module: {
rules: [
{
test: /\\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: { modules: true }
},
{ loader: 'sass-loader' }
]
}
]
}
plugin
웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성
로더는 파일을 해석하고 변환, 플러그인은 결과물의 형태를 변경하는 역할
선언 방법
// webpack.config.js
module.exports = {
plugins: []
}
플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가 가능.
// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new webpack.ProgressPlugin()
]
}
- HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
- ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인
자주 사용하는 플러그인
웹팩
- 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러
- 모듈 번들러 : 웹 애플리케이션을 구성하는 자원(HTML,CSS,JS, Images 등)을 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구
웹팩에서의 모듈
웹 애플리케이션을 구성하는 모든 자원을 의미 (HTML, CSS, JS등 )
모듈 번들링
웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작
빌드, 번들링, 변환은 모두 같은 의미.
웹팩이 필요한 이유
- 파일 단위의 js 모듈 관리의 필요성
- 웹 개발 작업 자동화 도구
- 웹 서버 배포시 HTML,CSS,JS 압축, 이미지 압축, CSS 전처리기 변환과 같은 작업을 해야하는데 이런 일을 자동화 해 주는 도구 등장
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
- 필요한 자원을 모두 한번에 로딩하지 않고 필요할 때 마다 요청하자는 웹팩의 철학
웹팩의 속성
entry
웹 자원을 변환하기 위해 필요한 최초 진입점이자 js파일 경로
// webpack.config.js
module.exports = {
entry: './src/index.js'
}
위 코드는 웹팩을 실행했을 때 src 밑의 index.js을 대상으로 웹팩이 빌드를 수행하는 코드.
Entry 파일에 들어가야 하는 내용
- 웹 애플리케이션의 전반적인 구조와 내용이 담겨있어야 함.
- 웹팩이 해당 파일을 가지고 애플리케이션에서 사용되는 모듈과의 연관 관계를 이해하고 분석하므로 애플리케이션을 동작시킬 수 있는 내용들이 담겨야 함.
// index.js
import LoginView from './LoginView.js';
import HomeView from './HomeView.js';
import PostView from './PostView.js';
function initApp() {
LoginView.init();
HomeView.init();
PostView.init();
}
initApp();
index.js 파일에서 메인화면, 게시글 작성 화면 등 필요한 파일들을 임포트 해서 사용.
웹팩을 실행하면 해당 파일들의 내용까지 해석하여 빌드한다.
디펜던시 그래프 (Dependency Graph) : 모듈 간의 의존 관계가 생기는 그래프
entry 유형
엔트리 포인트는 1개 이상이 될 수도 있다.
entry: {
login: './src/LoginView.js',
main: './src/MainView.js'
}
위와 같이 엔트리 포인트를 분리하는 경우는 SPA보다는 서버에서 해당 정보를 내려주는 멀티 페이지 애플리케이션에 적합하다.
output
output은 웹팩을 돌리고 난 결과물의 파일 경로
// webpack.config.js
module.exports = {
output: {
filename: 'bundle.js'
}
}
entry와 다르게 객체 형태로 옵션들을 추가해야 한다.
Output 속성 옵션 형태
최소한 filename은 지정해야 하며 일반적으로 path속성을 함께 정의
// webpack.config.js
var path = require('path');
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
}
}
- filename : 웹팩으로 빌드한 파일의 이름
- path : 해당 파일의 경로
- path 속성에 사용된 path.resolve() 코드는 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API
Output 파일 이름 옵션
- 결과 파일 이름에 entry 속성을 포함하는 옵션
module.exports = {
output: {
filename: '[name].bundle.js'
}
};
- 결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션
module.exports = {
output: {
filename: '[id].bundle.js'
}
};
- 매 빌드시 마다 고유 해시 값을 붙이는 옵션
module.exports = {
output: {
filename: '[name].[hash].bundle.js'
}
};
- 웹팩의 각 모듈 내용을 기준으로 생성된 해시 값을 붙이는 옵션
module.exports = {
output: {
filename: '[chunkhash].bundle.js'
}
};
loader
로더는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML,CSS,Images, 폰트 )들을 변환할 수 있도록 도와주는 속성.
module이라는 이름 사용
// webpack.config.js
module.exports = {
module: {
rules: []
}
}
CSS Loader 적용
css를 임포트한 파일을 웹팩으로 빌드하면 에러가 난다. 이를 해결하기 위해서 css파일을 해석하기 위한 적절한 로더를 추가해야한다.
npm i css-loader -D
// webpack.config.js
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\\.css$/,
use: ['css-loader']
}
]
}
}
- rules에 배열 객체 등록
- text : 로더를 적용할 파일 유형 ( 일반적으로 정규표현식 )
- use : 해당 파일에 적용할 로더의 이름
자주 사용되는 로더
여러개의 로더 사용시 rules 배열에 로더 옵션을 추가해준다.
module.exports = {
module: {
rules: [
{ test: /\\.css$/, use: 'css-loader' },
{ test: /\\.ts$/, use: 'ts-loader' },
// ...
]
}
}
로더 적용 순서
특정 파일에 대해 여러개의 로더를 사용하는 경우 순서에 주의해야한다.
기본적으로 오른쪽에서 왼쪽 순으로 적용된다.
module: {
rules: [
{
test: /\\.scss$/,
use: ['css-loader', 'sass-loader']
}
]
}
scss 파일에 대해 Sass 로더로 전처리를 한 다음 웹팩에서 CSS파일을 인식할 수 있게 로더를 적용하는 코드.
웹팩으로 빌드한 자원으로 실행했을 때 해당 CSS 파일이 웹 애플리케이션에 인라인 스타일 태그로 추가되는 것을 원한다면 style로더도 추가 가능.
{
test: /\\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
배열로 입력하는 대신 아래와 같이 옵션을 포함한 형태로도 입력 가능.
module: {
rules: [
{
test: /\\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: { modules: true }
},
{ loader: 'sass-loader' }
]
}
]
}
plugin
웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성
로더는 파일을 해석하고 변환, 플러그인은 결과물의 형태를 변경하는 역할
선언 방법
// webpack.config.js
module.exports = {
plugins: []
}
플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가 가능.
// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new webpack.ProgressPlugin()
]
}
- HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
- ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인
자주 사용하는 플러그인
출처 : https://joshua1988.github.io/webpack-guide/
웹팩 핸드북
joshua1988.github.io