React로 시작하는 프론트 개발 4(환경 구축 3, webpack)

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에 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')
}

위 세파일을 srcs라는 디렉토리에 넣어두고 root 디렉토리에 webpack.config.js을 작성한다. webpack.config.js는 webpack을 실행할 때 참고하는 설정파일이다.

module.exports = {
    entry: {
      main: "./srcs/main.js",  /* 최초에 webpack 빌드가 시작되는 위치 */
    },
    output: {
        filename: 'bundle.js', /* bundling한 결과물 */
    },                         /* 설정하지 않으면 자동으로 dist 폴더에 생성됨 */
}