이 글은 https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#웹팩이란 에서 참조했습니다.
webpack이란?
최신 front-end 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.
모듈 번들러란?
웹 애플리케이션을 구성하는 HTML, CSS JS, IMG 등을 모두 각각의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구를 말한다.
모듈이란?
프로그래밍 관점에서 특정 기능을 갖는 작은 단위.
비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 된다.
webpack에서의 모듈은 js 모듈에만 한정되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다.
webpack의 등장 배경
- 파일 단위의 모듈 관리의 필요성.
- 웹 개발 작업 자동화 도구.
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능.
파일 단위의 모듈 관리의 필요성
웹 애플리케이션을 만들 때 여러 개의 js파일을 사용한다.
webpack을 사용하지 않을 때는 여러 개의 js파일이 서로 간섭 주거나 받을 수 있어 오류가 발생하는 문제가 생기는데, webpack을 사용하면 여러 개의 파일이 서로에게 간섭 주거나 받지않고 각각의 js파일을 모듈로 관리할 수 있다.
웹 개발 작업 자동화 도구
front-end 개발은 개발 -> 브라우저에서 확인 -> 수정 -> 브라우저에서 확인의 반복이다.
위의 일련의 작업을 편리하게 하기 위해 코드를 수정하고 저장하면 브라우저에 바로 반영되는 자동화 도구를 쓴다.(안쓰면 코드 수정하고 저장하고 브라우저에서 계속 새로고침을 해야한다.)
또한 파일 압축이나 전처리기 변환도 처리해준다.
웹 애플리케이션의 빠른 로딩 속도와 높은 성능
사용자가 웹을 이용 할 때 화면이 바로 보이지 않고 로딩이 3-5초 이상 걸리면 떠나버리는 경우가 많다.
빠른 로딩 속도를 위해 브라우저에서 서버로 요청하는 파일들의 숫자를 줄이기 위해 webpack이 파일들을 압축하는 작업을 한다.
또한 로딩하는데 필요한 자원이 아닌 나중에 쓰이는것들은 나중에 요청하는 Lazy Loading이 등장했다.
webpack의 4가지 주요 속성
- entry
- output
- loader
- plugin
entry
webpack에서 웹 자원을 변환하기 위해 필요한 최초 진입점.
module.exports = {
entry: "./src/index.js"
};
위 코드는 webpack을 실행했을 대 src 폴터 밑의 index.js를 대상으로 webpack 빌드를 수행하고 SPA라고 가정하고 작성한 코드이다.
entry: {
login: './src/LoginView.js',
main: './src/MainView.js'
}
위 코드는 SPA가 아닌 특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태의 MPA에 적합하다.
output
webpack을 돌리고 난 결과물의 파일 경로를 의미한다.
var path = require("path");
module.exports = {
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./dist")
}
};
최소한 filename은 정의해줘야 하며 일반적으로 path 속성을 함께 정의한다.
filename은 webpack으로 빌드한 파일의 이름을 의미하고, path 속성은 해당 파일의 경로를 의미한다.
path는 path.resolve()가 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어주는 Node.js API이다.
loader
webpack이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원들을(HTML, CSS, IMG, Font 등) 변환할 수
있도록 도와준다.
module.exports = {
module: {
rules: []
}
};
위는 그냥 기본 뼈대.
css loader를 적용해보자.
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: ["css-loader"]
}
]
}
};
rules 배열에 객체로 추가한다.
객체에는 test 프로퍼티와 use 프로퍼티가 있다.
test는 로더를 적용할 파일 유형(일반적으로 정규 표현식 사용)
use는 해당 파일에 적용할 로더의 이름
위 코드를 정리해보면 해당 프로젝트의 모든 css 파일에 대해서 css 로더를 적용하겠다는 의미이다.
module: {
rules: [
{
test: /\.scss$/,
use: ["css-loader", "sass-loader"]
}
];
}
위 코드는 특정 파일 유형에 여러 개의 loader를 사용하는 경우 배열안에 loader들을
,로 구분하여 작성하며 오른쪽에서 왼쪽 순서로 적용된다.
plugin
webpack의 기본적인 동작에 추가적인 기능을 제공한다.
해당 결과물의 형태를 바꾸는 역할을 한다.
module.exports = {
plugins: []
};
plugin 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다.
