번들링과 모듈 번들러 webpack
개발을 할 때 동일한 코드를 계속해서 작성해야 하는 경우가 있다. 이럴 경우 같은 일을 반복적으로 하는 것을 줄이기 위해, 코드의 복잡성을 줄이기 위해 해당 코드를 따로 분리를 한다. 이렇게 따로 분리된 파일을 모듈이라고 한다. 코드가 많아질수록 이러한 모듈 역시 그 수가 늘어나게 된다. 많은 수의 모듈로 이루어진 상태로 해당 파일들이 서버를 통해 사용자에게 제공되기 시작하면 사용자는 한 번 페이지를 요청할 때 각 파일들을 모두 받아와야만 하고 그렇게 되면 오랜 시간이 걸릴 수밖에 없다. 때문에 개발 시 여러 개의 모듈로 자바스크립트 파일을 분리해 둔 상태에서 운영계로 배포를 할 때에는 해당 모듈들을 하나로 묶어서 서버를 통해 사용자에게 서비스되도록 한다. 이렇게 여러 모듈을 하나로 묶는 작업을 번들링이라고 하고, 이를 도와주는 도구를 모듈 번들러라고 한다. 모듈 번들러 중 많이 사용되는 것이 바로 webpack이다.
여러 개의 모듈을 호출할 경우의 네트워크
a.js, b.js, c.js 파일을 생성한 후 이를 index.html 파일에 모듈 형태로 import 해주었다. 그 후 index.html파일을 실행하는 경우 위의 화면처럼 각각의 파일들을 모두 따로 가지고 오는 것을 확인할 수 있다.
a-1.js, a02.js 파일을 새로 생성하고 이를 a.js 파일에 import 하였다. 그 후 index.html 파일을 실행한 결과 해당 모듈들이 모두 네트워크를 통해 통신되고 있는 모습을 보인다. 이렇게 모든 모듈들을 계속해서 가지고 오는 방식은 매우 비효율적이다. 각각의 콘텐츠들을 가지고 오는데 필요한 시간들이 불필요하게 낭비될 수 있기 때문이다.
npm을 이용하여 webpack 설치하기
// package.json 생성
% npm init -y
// webpack 다운로드
% npm install --save-dev webpack webpack-cli
webpack을 이용하여 번들링 하기
// 기본적으로 webpack을 이용하여 번들링하기
% npx webpack --entry ./src/index.js --output-path ./dist
// 개발자 모드로 번들링하기
% npx webpack --entry ./src/index.js --output-path ./dist --mode development위의 명령어는 src폴더의 index.js 파일을 기준으로 번들링을 진행하여 dist 폴더 안에 번들링 한 파일을 넣으라는 명령어이다. 기본적으로 진행을 하게 될 경우 모든 코드가 한 줄로 붙어있는 min 형태의 파일로 출력이 되어 잘 알아볼 수가 없다. 때문에 개발을 진행하는 경우에는 개발자모드로 번들링을 진행하면 알아보기 쉽게 번들링 된 파일을 만날 수 있다. 코드 실행 후에는 dist 폴더에 main.js 파일이 생성된다.
설정파일을 이용하여 번들링 하기
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};위와 같은 파일 생성 후
% npx webpack위의 명령어를 실행하면 dist 폴더 안에 bundle.js라는 파일로 번들링이 진행된다.
댓글