Webpack ?
- 여러 개의 리소스 파일(js, css, jpg 등등)을 하나의 js파일로 묶어주는 도구입니다.
- 여러개의 파일을 묶어주기 때문에 네트워크 접속 횟수를 줄여 빠른 서비스를 제공할 수 있습니다.
- 많은 자바스크립트 패키지를 사용하다 보면, 서로 다른 패키지들이 서로 같은 이름의 변수나 함수를 사용하면서 예상하지 못한 충돌로 인해서 오작동이 발생할 수 있는데, 이를 극복하기 위해서 등장한 것이 모듈입니다.
모듈(Module)?
웹팩 공식문서에서 모듈은 모듈 프로그래밍에서 개별적인 기능을 하는 작은 단위라고 설명합니다. javascript의 관점에서 본다면, javascript 파일을 모듈이라고 할 수 있을 것 같습니다. 웹팩의 관점에서 본다면 모듈은 javascript 뿐만 아니라 애플리케이션을 구성하는 HTML, CSS, JS, Image, Font 등등 많은 파일들을 모듈이라고 합니다.
번들러(Bundler)?
웹팩에서는 애플리케이션을 구성하는 모든 모듈을 병합하고 압축해서 만들어진 하나 이상의 파일을 번들이라고 하며, 이러한 동작을 모듈 번들링이라고 합니다. 따라서 웹팩 정의에 나오는 모듈 번들러란 모듈을 번들링 하는 도구라고 할 수 있습니다.
실습
저는 VSCode와 LiveServer를 사용하여 실습하였습니다.
먼저 빈 프로젝트를 하나 생성하고 index.html 파일과, add.js, subtract.js 파일을 생성해 주었습니다.
// index.html
<html>
<body>
<h1>Webpack Test</h1>
<div id="root1"></div>
<div id="root2"></div>
</body>
<script type="module">
import add from "./add.js";
import subtract from "./subtract.js";
const a = 1;
const b = 2;
document.querySelector("#root1").innerHTML = add(a, b);
document.querySelector("#root2").innerHTML = subtract(a, b);
</script>
</html>// add.js
function add(a, b) {
return a+b;
}
export default add;// subtract.js
function subtract(a,b) {
return a-b;
}
export default subtract;
index.html파일에서는 add, subtract를 import 해서 아이디가 붙은 태그에 각각 innerHTML을 사용해 해당 값을 넣어주었습니다. 이렇게 만들고 결과물을 한번 확인해 보겠습니다.
사진과 같이 결과물은 잘 나옵니다. 하지만 add와 subtract를 따로 불러왔기 때문에, 만약 이렇게 불러와야 할 js파일들이 많아진다면 네트워크의 접속 횟수가 많아져 로딩이 느려질 수도 있습니다. 접속 횟수를 줄이기 위하여 웹팩을 사용해서 두 파일을 번들링 해보겠습니다.
번들링 전에 먼저 디렉터리를 정리해 주겠습니다. source라는 파일을 생성하여, add.js, substact.js 파일을 옮겨주었고 index.js파일을 생성하여 html 내에 있는 script 코드들을 옮겨주었습니다.
// ./source/index.js
import add from "./add.js";
import subtract from "./subtract.js";
const a = 1;
const b = 2;
document.querySelector("#root1").innerHTML = add(a, b);
document.querySelector("#root2").innerHTML = subtract(a, b);
Node.js의 설치는 모두 되어있다고 가정하겠습니다.
우선 webpack을 받기 위해 Node.js환경을 세팅하기 위해 터미널을 켜줍니다.
npm init
해당 명령어를 실행했다면 세부설정을 위한 질문들이 나오는데, 저는 모두 기본값으로 설정했습니다.
package.json 파일이 생성된 것을 확인합니다.
그리고 웹팩을 설치하기 위해 아래 명령어를 입력합니다.
npm install -D webpack webpack-cli
웹팩 설정을 위해 configuration 파일을 하나 만들어야 합니다. 프로젝트 최상위 폴더에 webpack.config.js라는 파일을 하나 만들어주겠습니다.
const path = require("path")
module.exports = {
mode : "development",
entry: {
index: "./source/index.js",
},
output: {
filename: "[name].js",
path: path.resolve("./dist")
}
}
공식문서를 참고해서 작성한 config입니다.
Mode | 웹팩
웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.
webpack.kr
mode는 development, production, none 세 가지 중 하나로 설정하고 있습니다. 각 설정마다의 차이는 공식문서를 참고하시면 좋을 것 같습니다.
entry는 애플리케이션 번들 처리를 시작할 지점을 뜻합니다. 저는 source/index.js를 진입점으로 설정했기 때문에 위와 같이 적어주었습니다.
output에서 filename의 [name]은 entry에 추가한 key값이 문자열로 들어오는 방식입니다. path는 path 모듈의 resolve함수를 사용해서 설정해 주었습니다.
npx webpack
config 설정을 마치고 터미널에 위 명령어를 입력하면 dist폴더가 생성되고 index.js라는 파일이 하나 생성됩니다. 이 파일은./source/index.js 파일을 번들링 한 코드로 적용을 위해 index.html파일에서 script를 수정해 보겠습니다.
<html>
<body>
<h1>Webpack Test</h1>
<div id="root1"></div>
<div id="root2"></div>
</body>
<script src="./dist/index.js"></script>
</html>
수정을 마치고 LiveServer에 들어가 화면이 잘 나오는지 확인해 주겠습니다.
이전과 동일하게 화면이 잘 나오고, Network 탭을 확인하면 번들링 된 index.js파일 하나만 로드하고 있는 것을 확인할 수 있습니다.
Loader
웹팩은 모든 파일을 모듈로 바라봅니다. 자바스크립트로 만든 모듈뿐만 아니라 스타일시트, 이미지, 폰트까지 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있습니다. 로더는 css파일을 자바스크립트에서 로딩할 수 있도록 하고, 이미지를 data URL형식의 문자열로 변환, 타입스크립트와 같은 다른 언어를 자바스크립트로 변환시켜 주는 역할을 합니다.
실습에서는 css-loader, style-loader를 사용하여 css파일도 함께 번들링 하는 작업을 해보겠습니다.
source 폴더에 style.css라는 파일을 하나 만들어 주겠습니다.
// style.css
body {
background-color: aqua;
color: tomato;
}
그리고 이 파일을 source/index.js에 import 해주었습니다.
// source/index.js
import add from "./add.js";
import subtract from "./subtract.js";
import "./style.css"
const a = 1;
const b = 2;
document.querySelector("#root1").innerHTML = add(a, b);
document.querySelector("#root2").innerHTML = subtract(a, b);
css-loader와 style-loader를 사용하기 위해서는 먼저 설치가 필요합니다. 아래 명령어를 사용하여 설치해 줍시다.
npm install --save-dev style-loader css-loader
webpack.config.js 파일에 들어가 설치한 로더들을 설정해 줍니다.
아래와 같이 rules 프로퍼티에 배열 형식으로 loader가 들어갑니다.
test는 타깃 파일의 문자열이 들어가고, use에는 사용할 로더가 배열형식으로 들어갑니다.
// webpack.config.js
const path = require("path")
module.exports = {
mode : "development",
entry: {
index: "./source/index.js",
},
output: {
filename: "[name].js",
path: path.resolve("./dist")
},
module: {
rules: [{
test: /\.css$/,
use:['style-loader','css-loader']
}]
},
}
그리고 'npx webpack'을 실행해 주면, css 파일 또한 index.js에 번들링 되고 아래와 같이 표시가 됩니다.
만일 번들링을 하지 않고 link태그를 통해 html에 직접 css를 넣어줬다면 Network 탭에서 style.css파일도 함께 받아와야 하지만, 웹팩으로 index.js와 함께 번들링 해주면서 네트워크 접속 횟수를 줄여줄 수 있었습니다.
해당 실습은 생활코딩 'Webpack' 부분을 공부하고,
공식문서를 참고하여 만들어본 예제입니다.
'Javascript > Javascript' 카테고리의 다른 글
| [Javascript] 실행 컨텍스트 (0) | 2023.04.03 |
|---|---|
| [Javascript] 호이스팅(Hoisting) (0) | 2023.03.17 |
| [Javascript] 자바스크립트의 프로토타입 (0) | 2023.03.13 |
| [Javascript] 02. Javascript Intermediate (0) | 2022.07.13 |
| [JS] 01. Javascript Basic (0) | 2022.07.13 |