웹팩

배경: 모듈을 지원하기 시작한 것은 Es2015부터이다. 

function sum(a,b) {return a+b;} //전역공간에 sum이 노출.     //math.js

sum(1,2);   /app.js

위 코드는 하나의 html파일 안에서 로딩해야한다. math가 로딩되면 app.js sum을 찾은뒤 함수를 실행하는데 전역 공간에 노출되어서 충돌이 문제야.

 

해결방법:

1.1IIFE 방식의 모듈

-스코프를 사용한다. 함수 스코프를 만들어 외부에서 안으로 접근하지 못하도록 격리한다. 스코프 안에서는 자신만의 이름 공간이 존재하므로 스코프 외부와 이름을 충돌을 막을 수 있다.

var math = math || {}; //math 네임스페이스

(function () { 

  function sum(a,b) { return a +b;}

  math.sum = sum;}) ();  //네임 스페이스에 추가.

즉시 실행 함수로 감쌌기 때문에 다른 파일에서 이 안으로 접근 할 수 없다. sum이란 이름은 즉시실행함수 안에 감추어졌기 때문에 외부에서는 같은 이름을 사용해도 괜찮다. 

1.2 다양한 모듈 스펙

-js  모듈을 구현하는 대표적인것이 AMD , CommonJS다.

-CommonJS는 js를 사용하는 모든 환경에서 모듈을 하는 것이 목표다. exports 키워드로 모듈을 만들고 require()함수로 불러들이는 방식이다.

 exports function sum(a,b) {return a +b}   //math.js

  const math = require('./math.js');   //app.js

  math.sum(1,2)  

-AMD는 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표다. 주로 브라우져 환경

-UMDsms AMD기반으로 CommonJS 방식까지 지원하는 통합 형태다. 

 es2015에서 표준 모듈 시스템을 내놓았다. 지금은 바벨과 웹펙을 이용해 모듈 시스템을 사용하는 것이 일반적.

 

export function sum(a,b){return a + b;} //math.js

import * as math from './math.js';  ////app.js

math.sum(1,2)

 

웹팩: 여러개 파일을 하나의 파일로 합쳐주는 번들러이다.

하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다. 

장점: 

1.여러 파일의 js코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄 일 수 있다.

2. 모듈 단위로 개발이 가능하며, 가독성과, 유지보수가 쉽다.

3. 최신 js문법을 지원하지 않는 브라우저에서 사용 할 수 있는 코드로 쉽게 변환시켜준다.

하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있지만 ,  청크, 캐시, 코드 스플릿 개념들을 도입하면서 문제를 해결하고 있다.

 

웹팩을 하는 이유는 : http요청이 비효율적이기 때문에.

하나로 합쳐서 크로스 브라우징 대응해주고 압축도 해주고 여러 파일들을 하나로 합쳐준다.

JS 자체만으로 의존관계가 있다. es2015,requireJS,CcommonJS등 import나 require로 js끼리 서로 의존한다. 

 

npm install -D webpack webpack-cli 을 설치하면 node_modules/.bin폴더에 실행 가능한 명령어가 생긴다. webpack과 webpack-cli가 잇는데  --mode, --entry, --output면 코드를 묶을 수 있다.

-- mode 웹팩 실행 모드는 의미하는게 개발 버전인 development를 지정한다.

--entry 시작점 경로를 지정하는 옵션

--output 번들링 결과물을 위치할 경로.

 

@babel/core : 리액트는 es6를 사용하므로 여러 브라우저에서 사용가능하도록 es5문법으로 바꿔줌

 

@babel/preset-react : jsx를 js로 바꿔준다.

 

@babel/preset-env : es6를 es5로 바꿔준다. es6뿐만 아니라 브라우저에 따라 알아서 컴파일 해준다. 

 

babel-loader : js파이을 babel preset/plugin과 webpack을 사용하여 es5로 컴파일 해주는 plugin, jsx-> js로 컴파일

 

webpack: 모든 리액트 파일을 하나의 컴파일된 하나의 자바스크립트 파일에 넣기 위해

 

webpack-dev-server: live reload

 

webpack-cli: build 스크립트를 통해 webpack 커맨드를 사용하기 위해

 

html-webpack-plugin : 나중에 webpack.config.js에서 사용할 플러그인

 

root-webpack.config.js 폴더에서 

entry: './src/index.js',
output: {
filename: 'main.js',
path: __dirname + '/dist'

-entry와 ouput을 설정하면 dist폴더가 생겨난다.

-package.json에 "build": "webpack --config webpack.config.js"로 웹팩을 실행한다. 

t},"build": "webpack --config webpack.config.js"

 

로더

-웹팩은 모든 파일을 모듈로 본다. js,css,image,font까지 다 모듈로 변환시켜준다.

import구문을 사용하여 js에 가지고 올 수 있다. 

-로더 덕분에 가능하다. ts을 js로 해주거나, 이미지 dataURL 형식의 문자열로 변환한다. 

 

플러그인

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

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

 

바벨

-크로스브라우징의 혼란을 해결 해 줄 수 있는것. 

-ecmascript 2015로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 

-es2015 이상의 코드를 적당한 하위 버전으로 바꾸어 주는 것이 주된 역할.

-파싱, 변환, 출력 이라는 단계를 거친다. 

코드를 읽고 추상 구문 트리로 변환하는 단계를 파싱 -빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념.

추상구문트리를 변경하는 것이 "변환" 실제로 코드를 변경하는 작업을 한다.

변경된 결과물을 "출력"하는 것이 마지막