🎁 Module bundler/📖 Webpack
웹팩을 기초부터 하나씩 (1) : 모듈 번들러, 간단한 번들링
DarrenKwonDev
2020. 7. 14. 21:44
전에도 언급했듯 웹팩은 모듈 번들러입니다.
모듈?
특정 기능을 하는 코드 덩어리입니다. 웹을 구성하는 HTML, CSS, JS 등이 모듈입니다. 당연히 SCSS, JSX 등 도 모듈입니다. 그런데 코드를 작성할 때 이들을 모두 한 페이지에 작성하는 것이 아니라 생산성을 위해 폴더와 파일 단위로 구분하여 작성합니다. 이 덩어리들을 한 곳에 모아 주는 것을 '모듈 번들러'라고 합니다.
왜 굳이 번들링을 해야 하는가?
분리된 파일에서 변수, 함수명이 겹쳐서 overwite되는 경우
이미지 압축, JS 트랜스파일 등 loader를 통한 자동화
Lazy Loading을 통한 로딩 시간 단축. (웹팩에서 코드 스플리팅을 할 수 있습니다)
HTTP 요청 횟수를 줄이기 위함 (프론트에서 서버로 http 요청을 보내는 데에는 숫자 제한이 있습니다)
웹팩을 이용한 간단한 번들링
웹팩이 빌드된 후의 결과물이 dist 폴더 안에 생길 것입니다.
<html>
<head>
<title>Webpack Demo</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
이 JS가 웹팩으로 변환될 것입니다.
function component() {
const newDiv = document.createElement("div");
newDiv.innerHTML = "hello guysss";
return newDiv;
}
document.body.appendChild(component());
webpack.config.js입니다.
const path = require("path");
module.exports = {
mode: "none",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.join(__dirname, "dist"),
},
};
실행할 스크립트 명령어입니다.
"scripts": {
"build": "webpack"
},
npm run build를 돌려주시면 dist 폴더가 자동으로 생성되고 그 안에 번들링된 결과물이 있는 것을 확인해보실 수 있습니다.
이 게시물은 웹팩 핸드북, 공식 문서 등을 참고하여 작성되었습니다.
웹팩 핸드북
joshua1988.github.io