WEBPACK

아 어려웠다 웹팩 설치.. 프로그래밍을 배우며 항상 어렵게 느껴지는게 바로 설정이다...

무언가 새로운 툴을 설치하고 설정하고 하는게 참 어렵다... ㅋㅋ

 

자 장장 두시간에 걸쳐 설정한 webpack을 알아보자

유튜브 클론코딩을 하던 중 서버쪽은 어느정도 진행이 되었는데 이제 클라이언트 쪽의 css나 javascript를 아직

하나도 안했다.

 

 

자 그럼 웹팩이란 무엇인가.

개발을 하다보면 자바스크립트 코드가 많아지고 여러개의 자바스크립트 파일을 만들게 된다.

이 파일들이 많아 질 수록 브라우저에서 로딩하는 것이 많이지기에 브라우저가 느려질 수 있고

또한 그만큼 네트워크 비용을 치뤄야 하는 단점이 있다. 그리고 파일들 간에 작성이 잘못된 경우 충돌의 위험성도 있다.

이러한 단점을 보완한 하나의 파일로 bundled하여 네트웍 비용을 최소화 할 수 있는 방법이 웹 프론트엔드에서 필요한데

이것이 바로 webpack이다.

 

우선 웹팩에 대한 개념을 잡기 위해 모듈과 번들러가 무엇인지 알아보자.

 

Module

- 프로그램을 구성하는 구성 요소의 일부

- 관련된 데이터와 함수들이 묶여서 모듈을 형성하고 파일 단위로 나뉘는 것이 일반

- 모듈화 프로그래밍은 기능별로 파일을 나눠가며 프로그래밍을 하는 것으로 유지보수가 쉽다.

 

Bundler

- 번들러는 지정한 단위로 파일을 하나로 만들어서 요청에 대한 응답으로 전달할 수 잇는 환경을 만들어 주는 역할

- 소스 코드를 모듈별로 작성할 수 있고 모듈간 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다.

 

Webpack

- 자바스크립트 정적 모듈 번들러이다.

- 모든것이 모듈이고 자바스크립트, css, img파일 등 모든것을 자바스크립트 모듈로 로딩해서 사용한다

- 주요 네가지 개념으로 Entry, Output, Loader, Plugin이 있다.

 

1. Entry

- 의존성 그래프의 시작점을 웹팩에서 엔트리라고 한다

- 웹팩은 엔트리를 통해 필요한 모듈을 로딩하고 하나의 파일로 묶는다

- 여러개가 존재할 수 있다.

 

2. Output

- 엔트리에 설정한 자바스크립트 파일을 시작으로 하나로 묶는다. 그 후 번들된 결과물의 처리할 위치를 아웃풋에 기록

 

3. Loader

- 웹팩은 오직 자바스크립트와 json형식만 이해할 수 있다.

- 로더는 다른 타입의 파일(css, scss, font, img, video 등등)을 웹팩이 이해하고 처리 가능한 모듈로 변환시키는 작업을 한다.

- test와 use키로 구성된 객체로 설정할 수 있다. test에 로딩할 파일을 지정하고, use에 적용할 로더를 설정한다.

- babel-loader, sass-loader, style-loader, css-loader 등등

 

4. Plugin

- 로다가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.

- 로더가 변환하는 동안 플러그인은 bundle optimization, asset management and injection of environment와 같은 일을 진행할 수 있다. 

 

 

-- 웹팩은 기본적으로 모듈 번들러이다

의존성 그래프에서 엔트리로 그래프의 시작점을 설정하면 웹팩은 모든 자원을 모듈로 로딩한 후 아웃풋으로 묶는다.

로더로 각 모듈별로 바벨, 사스 변환등의 처리를 하고 이결과를 플러그인이 받아 난독화, 텍스트 추출등의 추가 작업을 한다.

 

그럼 유튜브 클론코딩으로 적용해본 코드를 살펴보자.

먼저 실제로 개발시 코드를 작성할 client 폴더를 생성하고 안에 자바스크립트와 scss폴더를 각각 생성해줬다.

각각의 파일안에 main.js와 styles.scss 를 생성하자. 

그리고 main.js에 style.scss를 임포트 해준다. 왜냐~ 우린 main.js를 entry로 사용할거기 때문에~~ 스타일시트도 자바스크립트를 통해

연결해 줘야한다.

 

그리고 웹팩을 설치해 주자

$npm install webpack webpack-cli --save-dev

설치해주고 webpack.config.js 설정파일을 만들어 준다~

설정파일은 pakage.json파일과 같은 경로에 만들어 주자.

이제 작성한 설정파일을 훑어 보자

먼저 경로를 파악하는 path 모듈을 import해주고( webpack은 old js파일을 인식하기에 require를 사용)

export할  module.exports 객체를 만들어 준다.

 

먼저 시작점이 될 entry의 경로를 먼저 만들어준 클라이언트의 main.js로 설정했따.

 

mode는 개발 모드로 지정해줬다.

mode는 production과 development등등이 있는데 production은 배포시 최적화를 해주고 개발용으로 하면 빠르게 빌드할 수 있다고 한다.

 

watch는 파일이 수정될 때마다 콘솔창에 명령어를 쳐서 다시 키지 않도록 계속 지켜보며 수정되는 부분을 실시간 업데이트 해주는 객체이다. 서버에서 nodemon과 같은 기능.

pluggin은 아래 loader를 리뷰하고서 리뷰하기로 하고 넘어가자

 

output은 결과물을 저장할 파일이름을 지정하고 path에서 폴더를 지정해준다. 이때 폴더는 자동으로 생성이 된다.

path.resolve(__dirname, "assets") - asset이란 폴더를 만들어준다. 그리고 여기에 js/main.js를 생성해주는 것.

 

clean 옵션은 실제로 웹팩은 사용중인 파일은 추적하지 않는다. 이를 해결 하기 위해 빌드전에 정리하여 사용된 파일만 생성하도록 도와준다.

 

entry와 output을 설정했으니

이제 모듈을 다루자

module객체를 만들어주고

rules객체에  test에 각각 /\.js$/ and /\.scss$/를 적어준다 .js 와 .scss 파일을 모두 적용하겠다는 의미인듯

그리고 js파일의 경우 loader로 babel-loader를 사용 하고  옵션을 적어줬다. 

scss는 로더가 세개인데... 먼저 style-loader와 css-loader, scss-loader를 모두 설치했다.

순서가 중요하다 마지막에 기재된 순 .. 역순으로 웹팩이 적용된다.

고로 우리는 scss파일로 코드를 작성하고 넘기기 때문에

sass로더로 sass파일을 먼저 읽은후 css파일로 변환이되면 css로더로 다시 읽는다. 그리고 실제 html 태그에 적용될 style을 다시 로더하는 순서로 가야 하므로 style-laoder, css-loader, sass-loader순으로 적어주자.

 

요기까지만 작성하고 실행해도 스타일이 적용이 된다. 하지만 assets에는 여전히 main.js만 있다. 어쨌든 main.js에서 모든 모듈을 가지고있기에 스타일 적용이 된다. 그러나 직관적으로 눈에 보이고 싶기에 css를 분리해주고 싶다.

이때 plugin을 사용! MiniCssExtractPlugin

webpack홈페이지 내용이다. 이 플러그인은 CSS파일을 분리해서 추출한다고 한다. 굿굿

자 설치해주자

npm install --save-dev mini-css-extract-plugin 

별거 없다 이대로 가져다 썼다.. 대신에 플러그인에서 filename: "css/style.css" 로 css파일 이름을 정해줬다.(안하면 main.css로 생성된다) 그리고서~ main템플릿에 css파일 링크를 걸어주자.

 

요렇게 ~~ 웹팩 설정파일이 끝났다~ 이렇다.. 하고나면 간단하다..ㅡㅜㅡ

아 아직 안끝났다. package.json설정을 해주자

devDependencies가 많이 생겼다... ㅎㅎ

설정해줄 부분은 실행명령어 부분이다.

scripts에서 먼저 dev:assets에 웹팩을 지정해준다. 설정파일 이름이 webpack.config.js로 기본인경우 그냥 webpack만 적어도 무방하다

만약 다른 이름이라면 상기 이미지처럼 --config를 꼭 적어주자.

그리고 원래 "start" : "nodemon --exec babel-node init.js" 였던 부분이

"dev:server": "nodemon"으로 간결해졌다.. 이유는  프론트 엔드부분인 웹팩을 변경저장하는 경우에도 함께 리셋이 되었다

nodemon이 이또한 감시하고 있기 때문이었다.

그래서 nodemon.json파일을 하나 만들어주고 ignore와 exec를 적용했다.

뭐 눈치밥이 있으니 웹팩설정파일 무시하고 클라이언트 폴더 안의 내용 무시 assets폴더 안의 내용도 무시~!

그리고 패키지.json에 시작명령을 여기서 준것... 고로  패키지 제이슨이 가벼워졌다.

이제 서버는 npm run dev:server   프론트엔드 웹팩은 npm run dev:assets로 실행하면 된다.

 

 

아!!! 중요한 한가지~!~! assets에 접속할 경로를 지정해줘야 한다!! db파트에서 uploads폴더를 지정해줬던 것처럼

app.js로 가서 설정해주자 참고로

app.use("/assets", express.static("assets/"));  라우터 부분인 "/assets"는 그냥 원하는 데로 쓰면된다.

난 확인하기 편하게 폴더명 그대로 줬다. 아!!!!! 그럼 메인템플릿에 css 링크도 여기서 설정한 라우터경로 대로 줘야한다~!

요기까지.. 힘들었다.. ㅋㅋㅋ 힘들어야 더 재미있네..