Search
Duplicate

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

간단소개
ContributorNotionAccount
주제 / 분류
React
프론트엔드
태그
Scrap
팔만코딩경 컨트리뷰터 (Library DB (속성)에 관계됨)에 관계됨
7 more properties
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도 가능하다.
모든 기능을 명확히 알 수는 없지만 대략적으로 어떤 기능들이 있는지 알아두면 좋다.
자세한 내용은 공식사이트를 참고하자