WebPack

웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러 (Module Bundler) 이다.

 

 1. 의존성 그래프에서 엔트리로 그래프의 시작점을 설정한다.

 2. 모든 자원을 모듈로 로딩한 후 아웃풋으로 묶는다.

 3. 로더로 각 모듈별로 바벨, 사스 변환 등의 처리를 한다.

 4. 플러그인으로 이 결과를 난독화, 텍스트 추출 등의 추가작업을 한다.

 

웹팩은 위에 강조한 4가지 작업 방식으로 번들링을 한다.

 

1. 탄생과정

각 과정을 설명하기에 앞서, 웹팩의 탄생과정을 좀 더 설명해보자면 ...

 

 자바스크립트는 코드가 많아지면 하나의 파일로 관리하는데 있어서 한계에 부딪힌다. 

 그렇다고해서 파일 여러개를 브라우져에서 로딩하는 것은 그만큼 네트웍 비용을 치뤄야 하는 단점이 있고, 

 각 파일은 서로의 스코프를 침범하지 않아야 하는데, 잘못 작성할 경우 변수 충돌의 위험성도 있다.

 

 브라우져에서는 파일 단위 모듈 시스템을 사용하는 것은 쉽지 않은 일이다.

 모듈을 IIFE 스타일로 변경해주는 과정 뿐만 아니라 하나의 파일로 묶어(bundled) 네트웍 비용을 최소화 할 수 있는 방법이 

 프론트엔드 개발 과정에 필요한데, 

 웹팩은 이러한 배경에서 탄생했다. 

 * IIFE 란 ?? : Immediately-invoked Function Expression. 즉시 실행함수표현식 패턴이다.

 

2. 4가지의 작업방식 

 모두 webpack.config.js 파일에서 설정해준다.

 

 1. entry : 웹팩에서 모든것은 모듈이다. js, css, jpg 등 모든것을 자바스크립트 모듈로 로딩해서 사용한다.

 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리라고한다.

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

 

 2. output : 엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶어서

 번들된 결과물을 처리할 위치는 output에 기록한다.

 

 * output 까지가 웹팩으로 번들링하는 과정이다.

 

 3. loader : 웹팩은 모든 파일을 모듈로 관리한다고 했는데, 웹팩은 자바스크립트 밖에 모른다. 

 비 자바스크립트 파일을 웹팩이 이해하게끔 변경해야 하는데 로더가 그런 역할을 한다.

 가장 대표적인 웹팩 로더가 바벨이다.

 

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

 번들된 자바스크립트를 난독화 한다거나, 특정 텍스트를 추출하는 용도로 사용할 수 있다.

 

출처 : http://jeonghwan-kim.github.io/js/2017/05/15/webpack.html

참고 : https://jusungpark.tistory.com/52

 

 

 

--------------------------------------------------------------------------------------------------------------------------

개발한 프로젝트에서

크롬 개발자도구에 계속 도메인/socket.io/?EIO=3&transport=polling&t=N9z_dtS 404 에러가 뜨길래

이게 웹팩관련 에러일 수도 있다는 구글링 결과를 찾았다.

현재 프로젝트는 개발용이든 배포용이든 webpack-dev-server 명령어로 웹팩이 빌드되는데 그부분을 바꾸고자 

개발용과 배포용으로 웹팩빌드를 해본다.

 

관련 라이브러리

clean-webpack-plugin   (웹팩이 빌드되면서 생기는 build 폴더를 삭제 해준다.)

webpack-merge (현재 하려는 작업이 webpack.config.js 를 webpack.dev.js 와 webpack.prod.js 로 나누려 하는 작업인데, 그 두 파일간의 공통 설정이 있을것이다. 각 파일안에 적기보다 한 파일에서 관리하는게 나을것 같아서 찾아보았다. 두개의 파일이 공통설정을 공유할 수 있게 연결해주는 라이브러리)

 

과정

webpack.config.js 파일을 지우고

 

webpack.common.js  (공통 설정)

webpack.dev.js  (개발용)

webpack.prod.js  (배포용)

 

으로 나눠서 webpack-merge 라이브러리를 사용해서 구현.

 

패키지 제이슨 스크립트

"start": "webpack-dev-server --progress --open --config webpack.dev.js",

"deploy-production": "webpack-dev-server --mode production --config webpack.dev.js",

 

deploy-production 할때 webpack -p 명령어로 빌드해봤지만 빌드만 되고 서버를 켜지 않아서 포트로 접속이 불가능

webpack-dev-server 를 사용해준 상태.

mode 를 production 으로 해줬을 땐 NODE_ENVIRONMENT 값이 production 이어야한다.

 

 

webpack-dev-server 는 이름만 개발서버 인거지

그냥 webpack 과 html 파일 둘다 서버에 띄워주는 것 같다.

 

자료를 찾아보니

즉 지금 프로젝트 도메인 스크립트설정에 맞추려면 dev-server 를 사용해줘야함

 

 

아.. 추가적으로

크롬 개발자도구에 계속 도메인/socket.io/?EIO=3&transport=polling&t=N9z_dtS 404 에러 원인은

nginx 에서 localhost 에 접속을 못해서 생기는 에러였다.

그래서 웹팩 devserver 설정파일에서 host 를 '0.0.0.0' 으로 설정해줬다.

그랬더니 해결.

host 를 설정하지 않으면 기본값으로 'localhost' 가 설정된다.