웹팩의 공식문서를 보면 다음과 같이 나와있다.
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
웹팩은 최신 자바스크립트 어플리케이션을 위한 정적 모듈 번들러이다. 웹팩은 어플리케이션을 처리할 때 내부적으로 프로젝트에 필요한 모든 모듈을 맵핑하고, 하나 또는 이상의 번들을 생성하는 종속성 그래프를 작성한다.
즉, 웹에서 사용되는 모든 자원을 번들링 해주는 도구이다.
자바스크립트 코드를 하나의 파일로만 작성하는 것은 한계가 있다. 그렇다고 여러개의 자바스크립트 파일로 분리한 다음에 이 많은 파일들을 서버에 요청하여 로딩하는 것은 그만큼 서버와 통신을 많이하게 되고 네트워크 비용을 치루게 된다. 비효율적이다.
또한, 예전 모듈 개념이 없었을 때에는 자바스크립트 파일을 나누어 작성하면 서로의 변수 스코프를 생각하면서 작성해야 했었다. 변수 스코프를 침범할 경우, 변수가 충돌할 수 있기 때문이다. 최신 자바스크립트에서는 모듈 개념이 생겨서 이런 것을 해결했지만, 이러한 개념을 지원을 해주지 않는 브라우저도 있기 때문에 모듈을 브라우저들이 이해할 수 있도록 변환해줘야하는데 이것을 웹팩을 통해 할 수 있다.
웹팩은 각 자바스크립트 모듈들의 의존 관계를 파악하여 하나의 파일로 묶어주기(bundle) 때문에 네트워크 요청을 최소화 시킬 수 있고, 자바스크립트 코드들을 압축하고 최적화 할 수 있어서 로딩 속도를 높일 수 있다. 또한 자바스크립트 파일 뿐만 아니라 css라던지 다른 파일들도 함께 번들링해서 사용할 수 있다.
웹팩의 주요 개념으로는 다음과 같은 것이 있다.
- Entry
- Output
- Loaders
- Plugins
- Mode
웹팩 예제를 통해서 이러한 개념들이 무엇인지 알아보려고 한다.
우선 웹팩 예제 프로젝트를 만들어 준다.
$ mkdir webpack_tutorial
$ cd webpack_tutorial
$ npm init -y그리고 웹팩을 설치하여준다.
$ npm install --save-dev webpack webpack-cli
그리고 scr,build 폴더를 만들고 src에 index.js와 module1.js, module2.js 파일을 만들어준다.
// src/index.js
import "./module1";
import "./module2";
console.log("index.js")
// src/module1.js
console.log("module1.js")
// src/module2.js
console.log("module2.js")그리고 프로젝트 루트에 webpack.config.js파일을 만들어준다.
// webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/build")
},
mode : "none"
};
entry
웹팩에서는 모든 파일 (자바스크립트, 스타일시트, 이미지 등)을 자바스크립트 모듈로 로딩해서 사용하도록 한다. 그리고 이러한 모듈들의 의존성을 파악해 의존성 그래프를 생성하는데 이때 시작점을 웹팩에서 entry라고 한다.
html에서 사용할 자바스크립트의 시작점이 src/index.js이기 때문에 entry를 index.js로 설정해준다.
output
entry에 설정한 자바스크립트를 시작으로 의존 관계에 있는 모든 모듈을 번들하여 나오는 결과를 output에 설정한다.
mode
웹팩의 빌드 옵션이다. development, production, none 3가지 옵션이 있고, defalt 값은 production이다.
production은 최적화되어 빌드되어지고, development는 빠르게 빌드되고, none은 아무 기능 없이 빌드된다고 한다.
자세한 내용은 공식문서에서 확인할 수 있다. (https://webpack.js.org/configuration/mode/)
package.json에 다음과 같이 스크립트를 추가하여준다.
"scripts": {
"build": "webpack"
},
그리고 터미널을 통해 웹팩을 실행시키면 다음과 같이 bundle.js파일이 만들어지고 확인해 보면 모듈 파일들이 번들링 된 것을 확인할 수 있다.
Loader
웹팩에서는 모든 파일을 번들링 해준다. 자바스크립트 파일이 아닌 파일도 번들해주는데 이것을 로더라는 기능을 통해 할 수 있다.
Plugin
로더가 파일단위로 번들링 작업을 할 때, 플러그인은 번들링된 결과물을 가지고 추가 작업을 진행한다.
로더와 플러그인을 사용하여 html 파일을 빌드하는 것을 만들어보려고 한다. 우선 필요한 라이브러리를 추가로 설치해준다.
$ npm install --save-dev html-loader html-webpack-plugin
그리고 public폴더를 만들어 index.html 파일을 추가하고 webpack.config.js에 다음과 같이 추가하여 준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack_tutorial</title>
</head>
<body>
<div>webpack test</div>
</body>
</html>
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/build")
},
mode: "none",
module: {
rules: [
{
test: /\.html$/, // 가지고올 파일 정규식
use: [
{
loader: "html-loader", // 사용할 로더 이름
options: { minimize: true } // 사용할 로더 옵션
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html", // 해당 html 파일을 읽는다
filename: "index.html" // output으로 출력할 html파일
})
]
};
로더의 minimize옵션을 true로 사용하면 파일 내용이 한줄로 생성되어 코드를 최적화 시킨다.
참고로 HtmlWebPackPlugin은 output의 bundle.js를 자동으로 import해준다!!
이렇게 하고 웹팩을 실행시켜주면 build폴더에 bundle.js파일과 index.html이 생성된걸 알 수 있고, html을 실행시키면 콘솔도 잘 찍히고 있는 것을 알 수 있다.
플러그인에 대해서 좀 더 알아보기 위해 대표적으로 사용되는 UglifyJsPlugin도 적용시켜보려고..했는데 웹팩 4부터는 UglifyJsPlugin 플러그인이 사라지고 optimization 속성으로 대체되었다고 한다.
다음과 같이 webpack.config.js에 optimization 속성을 추가하고 웹팩을 실행시켜준다.
optimization: {
minimize: true
}
다음과 같은 결과물을 볼 수 있다.
이번 간단한 웹팩 예제 실습을 통해 웹팩이 무엇이고 어떠한 역할을 하는지, 주요개념은 어떤것이 있는지, 그리고 웹팩을 어떻게 사용하는지에 대해 알 수 있었다.
실습에서 빌드한 html 이외에도 css나 react도 로더와 플러그인을 통해 빌드할 수 있다. 또한 mode를 나누어 개발환경과 배포환경에 따라 다르게 빌드를 할 수 있다. 그리고 webpack-dev-server를 이용해서 재 빌드 없이 바로바로 수정사항을 반영할 수 있다.
이러한 것들은 곧이어 진행할 react 개발환경을 셋팅할 때 전부 적용해볼 예정이다.
사실 웹팩을 공부한 이유도 리액트 개발환경을 셋팅할 때 바벨과 같이 필수적으로 사용되어지기 때문이다.
하지만 웹팩에 대한 기초를 공부하면서 리액트 개발이 아니더라도 front-end에서 왜 웹팩이 중요한지 알 수 있었다. 아직은 웹팩에 대해 기초적인 것 밖에 모르고 공부해야할 옵션이나 최적화옵션 등이 많지만, 차근차근 알아가다보면 웹팩에 대해서 좀 더 잘 알게 될 것이라 생각한다.
아래는 참고한 레퍼런스 입니다.
https://steemit.com/javascript/@noreco/webpack
http://jeonghwan-kim.github.io/js/2017/05/15/webpack.html
https://nesoy.github.io/articles/2019-02/Webpack
https://www.zerocho.com/category/Webpack/post/58aa916d745ca90018e5301d
댓글