Webpack이란?
Webpack은 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러이다. 모듈 번들러는 HTML, CSS, JavaScript 등의 자원을 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.
Webpack에서 모듈은 HTML, CSS, JavaScript 뿐 아니라 jpg나 png 같은 이미지 파일까지 포함한 개념이다. JavaScript 이외의 다양한 파일들은 loader를 통해 번들링이 가능하다.
Webpack의 필요성
Webpack이 필요한 가장 큰 이유는 웹 앱의 빠른 로딩 속도와 성능을 위해서이다. 웹 페이지가 무거워질수록 로딩 속도와 성능이 저하되는데, 일반적으로 유저는 하나의 웹 사이트에 접근시 3초 이내에 웹 페이지가 뜨지 않으면 상당수 이탈하게 된다.
Webpack이 없다면 웹 페이지에서 각 자원들을 일일이 서버에 요청하여 받아와야 하지만, Webpack이 있다면 같은 타입의 파일들을 묶어서 받아올 수 있기 때문에 네트워크 코스트를 획기적으로 줄일 수 있다.
Webpack4 버전 부터는 Development, Production 두 가지 모드를 지원한다. Production 모드로 번들링 할 경우 코드 난독화와 압축, 최적화(Tree shaking) 작업을 지원해주기 때문에 보안성을 강화한 번들링을 진행할 수 있다.
Webpack의 핵심 컨셉
Webpack의 핵심 컨셉으로는 다음과 같은 것들이 있다.
- Entry
- Output
- Loader
- Plugin
...
Entry
Webpack에서 Entry는 소스코드의 시작점을 말한다.
Entry point라고도 하는 이 Entry 속성은 Webpack이 내부의 dependancy graph를 생성하기 위해 사용해야 하는 모듈이다. Webpack은 Entry point를 기반으로 하여 직/간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.
📁 webpack.config.js
module.exports = {
...
entry: "./src/index.js",
...
}default 값은 ./src/index.js로 되어 있고 애플리케이션 구조에 맞게 수정해주면 된다.
Output
Output 속성은 생성된 번들을 내보낼 위치와 생성될 파일의 이름을 Webpack에 설정하기 위한 역할을 한다.
📁 webpack.config.js
const path = require('path');
module.exports = {
...
output: {
path: path.resolve(__dirname, "docs"), // 절대 경로로 설정
filename: "app.bundle.js",
clean: true
},
...
}기본 출력 파일은 ./dist/main.js로 설정된다. output.filename과 out.path 속성을 이용하여 번들의 이름과 내보낼 위치를 설정한다. path 속성을 사용하기 위해서는 path 모듈을 이용한다.
Loader
Webpack은 기본적으로 js 파일과 JSON 파일만 이해하지만 loader를 사용하면 다른 유형의 파일들을 유효한 모듈로 변환하여 dependancy graph에 추가할 수 있다.
📁 webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
exclude: /node_modules/,
},
],
},
...
};loader는 webpack 설정에 아래와 같은 속성들을 가진다.
test: 변환이 필요한 파일을 식별하기 위한 필수 속성use: 변환 수행에 사용되는 loader를 가리키는 필수 속성exclude: 컴파일 하지 않을 폴더나 파일을 지정.include: 반드시 컴파일 해야 할 폴더나 파일 지정.
이러한 속성들은 module.rules 속성 안에 정의되어야 한다.
Plugin
Plugin을 사용하여 번들을 최적화학나 Asset을 관리하고, 환경변수를 추가하는 등의 작업을 수행할 수 있다.
📁 webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html"),
}),
new MiniCssExtractPlugin(),
],
...
};Plugin을 사용하기 위해서는 먼저 require()를 통한 요청이 필요하다.
그리고 나서 plugins 배열 안에 사용하고자 하는 Plugin들을 추가해준다. Plugin은 서로 다른 목적으로 여러번 사용할 수 있도록 만들어졌기 때문에 new 연산자를 사용하여 Plugin의 instance를 생성하여 사용한다.
