Webpack 이란?
Webpack 이란 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다.
모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
Module 이란?
모듈이란 특정 기능을 갖는 작은 코드 단위를 의미한다.
웹사이트에 접속하면 정말 많은 파일들이 다운로드 된다.
서버와의 접속이 많을수록 애플리케이션을 느리게 로딩된다. 서버에 접속하는 것을 비싼 작업이기 때문이다.
다운받는 파일들이 많아질수록 네트워크 커넥션이 늘어날 것이고, 그러면 사용자 입장에서도 서비스를 제공하는 입장에서도 더 많은 컴퓨팅 파워를 사용해야한다. 그리고 네트워크 부하가 많이 생기면서 컴퓨터가 서비스하는 속도가 느려질 수 없다. 사용자 입장에서는 서비스 경험이 떨어지고 서비스를 제공하는 입장에서도 컴퓨터에 자원이 많이 사용하기 때문에 돈을 더 많이 사용하게 되는 단점이 생긴다.
그래서 웹에서도 모듈의 개념을 사용하고 여러 개의 파일을 하나로 묶어서 제공하고 싶다는 생각을 한 사람들이 만든 도구가 바로 번들러라는 도구이다.
그리고 서로 같은 이름의 변수나 함수가 겹치게 될 경우 예상하지 못한 충돌로 인해 애플리케이션이 깨지게 된다.
이런 문제를 해결하기 위한 도구로 등장한 것이 Bundler 이다.
묶는다 라는 뜻으로 여러 개의 파일을 묶어주는 도구란 뜻이다.
WebPack, Broserify. Parcel 과 같은 도구들이 여기에 속한다.
그 중 WebPack 이 가장 인기 있는 번들러이다.
하나의 js 파일 안에 js 뿐만 아니라 css 와 여러 이미지 파일 등 모든 파일과 모듈들을 몰아 넣을 수 있고 동시에 성능 향샹을 위해 필요하다면 다시 분리할 수 도 있다.
특히 웹 팩을 둘러싼 생태계가 방대하기 때문에 우리가 웹 개발 작업에서 필요로 하는 정말 다양한 확장 기능들이 존재한다.
덕분에 아주 많은 작업을 자동화 할 수 있다.
아래처럼 body 안에 word 를 inner 해주면
두 번째 script 인 hello 가 출력된다. 이름이 충돌한 것이다.
그래서 규모 있는 애플리케이션에서는 이름의 충돌이 너무나 심각한 문제이기 때문에 그걸 극복하기 위한 여러가지 테크닉들이 존재한다.
node.js 의 프로젝트 폴더로 선언
npm init
엔터엔터엔터
이렇게 하면 package.js 파일이 생성된다.
프로젝트에 대한 여러가지 설명이 들어가 있게 된다.
웹팩을 프로젝트 폴더에 설치
npm install -D webpack webapck=cli
-D 옵션은 개발을 하기 위한 기능은 -D 옵션을 이용해서 설치한다.
그러면 devDependencies 라는 항목에 webpack과 webpack-cli 가 생성되고
이것은 이 프로젝트에 저 두 항목이 필요하다는 것이다.
그리고 node_modules 폴더에 웹팩을 구동하는데 필요한 두 개의 폴더가 추가 된다.
웹팩을 사용하는 2가지 방법
- 터미널 명령어 행에서 옵션을 주는걸 통해서 웹 팩을 핸들링
- config 파일에다가 웹팩에 시키고 싶은걸 적어서 웹 팩을 핸들링
그리고 설정 파일 이름을 webpack.config.js 라는 약속된 이름으로 했다면
npx webpack 만 해줘도 webpack.config.js 라는 파일을 찾앗더 실행한다. ㄴ
웹팩을 터미널에서 실행할 때
폴더에 설치한 웹팩ㄱ을 실행할 때는 앞에다 npx
npx webpack --entry ./src/index.js --output ./public/index_bundle.js
webpack아 입구에 해당하는 파일은(entry)는 소스 폴더에 있는 index.js 야
그리고 그걸 ㅇ ㅓ디로 출력 (output) 할거냐면 ./public/index_bundle.js 라는 이름으로 index.js 파일과 그 파일이 사용하고 있는 모든 파일들을 하나로 만들어서 index_bundle.js에 갖다놔 하는 명령이다.
웹팩 결과
단 하나의 파일을 다운 받고 저 하나의 파일 안의 모든 기능이 다 들어가 있기 때문에 서버랑 접속할 때 한 번만 커넥션이 이루어지기 때문에 사용자도 좋고 서버쪽에서도 더 좋다 그리고 동시에
예전 브라우저에서는 동작하지 않는 코드를 index_bundle.js 안에서 알아서 처리해서 오래된 브라우저에서도 동작할 수 있는 코드로 변환시켜준 것이다 그렇기 때문에 import 와 같은 최신 브라우저에 아주 세련된 기능을 사용하면서 오래된 브라우저도 지원할 수 있게 된다.
이것이 웹팩을 사용했을 때 얻는 굉장히 중요한 장점이다.
웹팩을 설정파일을 만들어서 실행할 때
설정 파일을 만들어주고
npx webpack (npx webpack --config webpack.config.js) 으로 실행해 주면 알아서 번들링을 해준다.
const path = require('path'); // node.js 에서 파일의 경로를 쉽게 핸들링 할 수 있도록 도와주는 일종의 부품
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(dirname, "public"), // dir은 현재 파일이 위치하고 있는 경로를 알려주는 약속된 변수이고 두 번째 인자로 퍼블릭이리ㅏ고 하는 하위 경로에 우리의 최종적인 결과물을 갖다놔 라는 뜻이다.
filename: 'index_bundle.js' // 원하는 파일 이름
}
}
웹팩 로더
npx webpack --watch
우리가 작업하고 있는 소스의 파일들이 변형됐을떄 웹팩이 변화를 감지하여 자동으로 컴파일을 실행시켜주는 옵션
매번 npx webapck 안해줘도 변화를 감지하여 화면을 반영해준다.
DevServer
live reload
hot module replacement
code splitting
lazy loading
