Webpack이란?

Webpack이란?

여러개의 파일을 하나의 파일로 묶어주는 개발 자동화 도구

 

먼저 기존 script로 불러오는 것들 type을 module을 지정해서 똑같은 이름의 변수를 다르게 지정하여 사용할 수 있다.

 

import 구문 사용하여 같은 이름의 변수 사용

변수 이름의 충돌은 위와 같이 import, export 구문으로 피할 수 있다.

저렇게 지정하면 word라는 변수를 사용할 수 없다.

그리고 import, export는 비교적 최신 기능이어서 오래된 웹 브라우저에서는 동작하지 않는다.

또 Network 탭에서 hello.js와 world.js 파일이 각각 다운로드 받아진다.

변수의 충돌을 없애고 해당 파일들을 각각 받지 않고 하나로 묶어서 자원을 아끼고 각각의 파일을 모듈로 만들어 사용할 수 없을까라는 생각에 번들러가 만들어졌다.

 

번들러라의 대표주자가 Webpack이다.

 

웹팩을 설치하여 사용하려면 webpack과 webpack-cli를 설치하면 된다.

 

webpack 설치 명령어

 

위에서 적었던 해당 구문을 새로운 이름의 js로 만들고 저 파일을 번들링하여 사용할 것임

 

번들링 대상이 될 구문

 

아래의 명령어를 입력하면 index.js에서 번들링된 파일들이 index_bundle.js 라는 파일의 이름으로 생성이 된다.

 

번들링을 위한 명령어

 

번들링된 index_bundle.js 라는 파일이 생성이 되고 해당 내용은 아래와 같이 압축되어 있다.

 

번들링된 파일의 내용

 

해당 파일을 펼쳐보면 document.querySelector~ 로 내용을 넣었던 부분이 아래와 같이 들어가있다.

 

번들링된 파일의 innerHTML 부분

 

그리고 저 번들링된 index_bundle.js 파일을 불러오면 사용할 수 있게 된다.

 

번들링된 파일 불러오기

 

기존에는 hello.js와 world.js 2군데에서 커넥션을 맺었으나 지금은 번들링된 index_bundle.js 파일 하나만 커넥션을 맺는다.(자원을 아낄 수 있음)

 

번들링된 파일만 커넥션

 

추가적으로 webpack의 설정 파일을 만들어 사용이 가능하다.

아래의 설정은 위의 npx webpack --entry ~ 명령어로 입력했던게 npx webpack 명령어로 실행이 된다.

 

webpack 설정파일

 

그리고 mode라는 설정을 통해 개발모드와 운영모드로 다르게 적용시킬 수도 있다.

 

또, loader를 사용해서 css파일도 번들링하여 사용할 수 있는데, 아래와 같이 설치한다.

 

webpack style,css-loader 다운로드

 

설정 파일의 내용도 변경이 되는데 해당 use 설정은 아래부터 실행이 된다.★

css-loader - webpack 안으로 css 파일을 읽어와서 load

style-loader - 가져온 css 코드를 웹페이지 안에 <style> 태그로 주입시켜주는 loader

 

webpack 설정 파일

따라서 css 파일을 읽어오는 'css-loader' 를 아래쪽에 넣었다.

 

그리고 해당 파일을 import 시키면 번들링되어진다.

 

번들링 대상이 될 파일

여러 개의 파일을 번들링 하고 싶을 때 설정파일을 변경해주어야 한다.

 

webpack 설정 파일(다중 파일 적용)

 

[name]이라고 지정한 부분에 index와 about이라는 이름의 번들링 파일이 각각 생성이 된다.

id,hash 등 여러 파일의 이름을 만들 수 있다.

 

 

플러그인을 사용하여 html 템플릿을 생성할 수도 있다.

 

html-webpack-plugin 설치 

기존 삽입되어 있는 구문1

기존 삽입되어 있는 구문2

현재 각각의 구문을 지우고 플러그인을 사용하여 해당의 구문을 넣어주고 싶다.

 

해당 설정으로 <script> 구문 삽입

위와 같이 플러그인 설정을 해주면(더 효율적인 방법이 있을듯) 번들링된 파일들을 불러오는 구문을 각각 넣을 수 있다.

 

 

작업하고 있는 소스들이 변경됐을 때 그것을 감지해서 자동으로 컴파일시켜주는 옵션은 아래와 같다.

 

소스 변경 자동 감지 설정

 

그리고 npm 패키지를 이용해서 유용한 기능들을 사용할 수 있다.

 

예를 들어, innerHTML 부분이 마음에 들지 않아서 lodash라는 패키지를 사용하여 변경하고 싶다.

 

기존 번들링 대상 파일

변경 후 번들링 대상 파일

 

이외 유용한 기능들이 많으니 나중에 찾아서 사용하면 될 듯 하다..

 

DevServer 라는 기능도 있는데

웹 브라우저를 자동으로 리로드 해주는 live reload

모듈을 수정했을 때 수정된 부분만 바뀌어서 나머지 정보들이 유지되는 hot module replacement가 있다.