[JavaScript] 자바스크립트 웹팩 (Webpack)

모듈

애플리케이션 규모가 커지면 하나의 js파일을 여러개로 쪼개는 것이 개발 및 유지보수에 효율적이다. 이 때 쪼개진 하나의 js 파일을 모듈이라고 한다. 모듈로 분리하게 되면, 필요한 어떤 곳에서도  재사용이 가능하다.

 

웹 애플리케이션이 완성되면 웹서버에 배포하게 된다. 사용자들이 브라우저를 통해 웹사이트에 접근하게 되면 브라우저는 사용자들에게 ui를 보여주기 위해 웹서버에 html, css image, js 같은 자원을 요청한다. 웹서버가 준비된 자원을 브라우저에게 응답함으로써 사용자들은 ui를 볼 수 있게 된다.

 

하지만 개발 편의성만을 위해 계속 js를 분리하면, 브라우저가 웹서버에게 요청해야할 파일의 갯수가 많아지고, 그만큼 컨텐츠를 요청하고 커넥션하는 시간이 소비되기 때문에 이러한 네트워크 비용의 증가는 페이지 로딩 시간을 길어지게 하므로 사용자 경험에 좋지 않다.

 

가장 효율적인 방법은 개발 편의를 위해 js를 모듈로 분리하면서, 페이지 로딩 시간을 줄이기 위해 브라우저에서 서버로 요청하는 http 갯수를 줄이는 방법이다.

 

번들링/모듈 번들러

개발할 때에는 모듈로 분리하여 개발 진행하고, 웹서버에 배포하기 전에 하나의 파일로 묶어서 배포하면 브라우저에서 서버로 요청하는 파일 수가 줄어든다. 이 때 배포 전 하나의 파일로 묶는 작업을 번들링이라고 한다. 또한 여러 모듈을 묶어주는 도구를 모듈 번들러라고 한다. 모듈 번들러에는 여러 종류가 있지만, 프론트엔드에서 가장 인기있는 모듈 번들러는 웹팩이다.

 

 

웹팩

웹팩은 여러개의 파일을 하나로묶어주는 모듈 번들러이고, 주로 js 파일을 위한 모듈 번들러이지만 플러그인을 포함하는 경우 js 뿐 아니라 html, css, image 와 같은 자원들도 변환할 수 있다.

 

웹팩 설치 및 실행

웹팩을 설치하기 위해서는 프로젝트가 npm에 의해 관리되어져야 한다. npm 초기화를 진행하고, package.json이 생기는 것을 확인한다.

~ % npm init -y

 

이후 웹팩을 설치한다. 웹팩은 운영 환경에 배포될 일이 없기 때문에 dev dependency에 추가될 수 있도록 --save-dev 옵션을 추가했다.

~ % npm install --save-dev webpack webpack-cli

 

로컬환경에 설치된 cli를 실행하기 위해서는 npx 명령어를 활용해야한다. entry는 웹팩의 진입점으로, 어떤 파일을 기준으로 번들링을 할지 지정한다. 지정한 js파일에서 import하고 있는 모듈들을 따라가며 번들링이 진행된다.

 

번들링이 된 파일을 어느 경로에 위치하게 할지 output-path도 지정한다.

~ % npx webpack --entry ./src/index.js --output-path ./dist

 

위 명령어를 실행하면 지정한 위치에 main.js가 생성된다. 번들링할 때 기본적으로 production 옵션이 적용되어 띄어쓰기 없이 최적화되어 파일이 생성된다.

 

압축없이 생성하려면 development 옵션을 추가하면 된다.

~ % npx webpack --entry ./src/index.js --output-path ./dist --mode development

 

번들링된 js파일만 html에서 불러와서 사용하면 동일하게 기능하면서도, 웹서버에 요청하는 파일 수와 네트워크 통신 시간이 줄어드는 것을 확인할 수 있다.

 

웹팩 환경 설정

웹팩은 실행될 때 자동으로 webpack.config.js를 참조하는데, 이 때 아래와 같이 작성하면 진입점을 설정하는 entry, 번들링파일이 위치할 경로인 output path와 파일명 filename 등을 기본적으로 설정할 수 있다. 미리 설정해두면 웹팩을 실행할 때 다른 옵션 없이 실행 명령어만 작성해도 동일하게 기능한다.

const path = require('path');

module.exports = {
  mode : 'production'	//or 'development'
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

(*웹팩 공식 홈페이지에서 제공함)

~ % npx webpack

 

번들링은 자주 사용하는 명령어이기 때문에 빌드될 때마다 같이 실행될 수 있도록 npm의 설정 파일인 package.json에 작성해두면 편리하다.

{
	~~
    
    "scripts" : {
    	~
        "build" : "webpack"//(추가 라인)로컬에 웹팩 설치되어있기 때문에 바로 webpack 명렁어 실행이 가능하다.
	},
    
    ~~
}

~ % npx run build

---

이 포스팅은 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의를 수강하며 작성되었습니다.

[지금 무료] 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의 | 짐코딩 - 인프