React로 시작하는 프론트 개발은 필자(seolim)의 경험을 기반으로 작성되며 절대 정답이 아닙니다! 이점을 유념하며 읽기 바랍니다.
Webpack
webpack is a static module bundler for modern JavaScript application
webpack 공식 페이지의 설명이다. 그래서 저게 뭔 소리냐, html에 집어넣을 자바스크립트 파일과 모듈을 하나로 묶어주는 빌드 툴이라는 의미다.
html을 작성해 보았다면 아래와 같이 한번쯤은 해봤을 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div_align_vertical</title>
<script src="./local_module1.js"></script>
<script src="./local_module2.js"></script>
<script src="https://web_module.com/module1.js"></script>
<script src="https://web_module.com/module2.js"></script>
...
</head>
<body>
...
</body>
</html>
HTML
복사
기본적으로 html에 javascript파일을 삽입하기 위해선 위와같이 script를 모두 등록해주어야 하며 그 module에서 사용되는 module또한 모두 등록해주어야 한다...
생각만해도 끔찍하다. 프로젝트의 규모가 커지면 과연 그 과정을 수동으로 하는것이 가능은 한 이야기일까?
webpack은 연결된 모든 모듈과 js파일을 하나의 js파일로 bundling해준다. 여기에 js뿐만 아니라 설정된 css나 png와 같은 정적파일들도 설정만 해주면 일괄적으로 하나의 js파일로 묶어서 처리할 수 있다.
Basic Useage
일단 어떻게 동작하는지 보자.
/* main.js */
const { module } = require('./module.js')
const { lib } = require('./lib.js')
function main() {
module()
lib()
}
main()
/* lib.js */
module.exports.lib = function () {
console.log('This is lib')
}
/* module.js */
module.exports.module = function () {
console.log('This is module')
}
JavaScript
복사
위 세파일을 srcs라는 디렉토리에 넣어두고 root 디렉토리에 webpack.config.js을 작성한다. webpack.config.js는 webpack을 실행할 때 참고하는 설정파일이다.
module.exports = {
entry: {
main: "./srcs/main.js", /* 최초에 webpack 빌드가 시작되는 위치 */
},
output: {
filename: 'bundle.js', /* bundling한 결과물 */
}, /* 설정하지 않으면 자동으로 dist 폴더에 생성됨 */
}
JavaScript
복사
먼저 webpack과 terminal에서 동작시킬 수 있도록 package를 설치하고 root디렉토리에서 실행한다
npm i webpack webpack-cli
npx webpack
JavaScript
복사
정확히 해당 과정을 수행했다면 dist 폴더가 생성되고 내부에 bundle.js파일이 있을 것이다.
해당 파일을 node로 실행시키면 정상적으로 동작하는 것을 확인할 수 있을 것이다.
이처럼 webpack은 여러 js파일을 하나로 bundling하는 역할을 한다.
그래서 뭘 하는데 쓸까?
webpack.config.js를 통해 다양한 설정과 자동화를 진행할 수 있다. 그 중 하나가 loader이다.
loader
loader는 webpack에서 적용하는 모든 파일을 tranforming하는 전처리 과정을 수행하는 모듈이다. 변환, 어디서 많이 들었다. 그렇다 babel이다.
webpack에서 babel을 loader로 적용시키면 babel의 설정에따라 변경시킨 bundle file을 얻을 수 있다.
react와 babel loader 및 babel관련 모듈을 설치하고 webpack에 적용시켜 보자
/* package 설치 */
npm i @babel/core @babel/plugin-transform-arrow-functions @babel/preset-react
npm i babel-loader
npm i react
/* babelrc.json */
{
"presets": ["@babel/preset-react"],
"plugins": ["@babel/plugin-transform-arrow-functions"]
}
/* webpack.config.js */
module.exports = {
...
module: { /* loader 추가 */
rules: [
{ test: /\.js$/, use: 'babel-loader' }
]
},
...
}
/* srcs/main.js */
import React from 'react'
import Comp from './comp'
const Main = () => {
return (
<div>
<Comp/>
</div>
)
}
/* srcs/Comp.js */
import React from 'react'
const Comp = () => {
return <h1>COMP</h1>
}
export default Comp
JavaScript
복사
위와 같이 작성하고 npx webpack 을 실행시키면 dist에 babel이 적용된 bundle file이 생성된다.
babel이외에도 markdown이나 css 와 같은 js가 아닌 파일도 loader로 읽어내 bundle file에 포함시키게 할 수 있다.
그 외에 webpack이 할 수 있는 것
webpack은 그외에 다양한 설정이 가능하다. dev server를 따로 파는 설정이나, template를 적용할 수 도 있고, 정적파일에 대한 설정 및 code spliting도 가능하다.
모든 기능을 명확히 알 수는 없지만 대략적으로 어떤 기능들이 있는지 알아두면 좋다.
