webpack.txt

터미널 명령어

nvm -list 노드버전마스터 노드 목록
nvm use 노드버전 사용

node -v 노드버전 확인

npm -v npm버전 확인
npm init 패키지 정의
npm init -y 패키지 한번에 정의 후 실행
npm install 네이밍 패키지 지역 설치 === npm i 
npm uninstall 네이밍 패키지 제거
npm install 네이밍 --global 시스템 전역 설치/ 시스템 레벨에 전역으로 설치하는 거 === --g


지역설치에도 두가지 옵션
npm i 네이밍 --save-dev 아니면 npm i 네이밍 -D  //  이렇게 설치하면 package.json에서 devDependencies에 설치

package.json 에서 dependencies와 devDependencies 차이
dependencies - 애플리케이션 로직과 관리 있는 것 , 화면의 로직과 직접적인 관련이 있는 것// ui 등등
devDependencies - 웹팩 같은 개발을 할 때 도움을 주는 보조 라이브러리용 ex)웹팩 사스 등등 즉 화면 구성 로직에 없어도 괜찮으면 여기에 넣어라

개발용 라이브러리와 배포용 라이브러리 구분하는 법
npm run build 프로덕션 모드 사용

npm run build라는 것을 사용하면 devDependencies 안에 있는 것들은 설치를 하지 않는다.


전역 설치 경로 
# window
%USERPROFILE%\AppData\Roaming\npm\node_modules

# mac
/usr/local/lib/node_modules


점
1. 스크립트 태그로 불러오는 것 보다 패키지로 불러오
npm 장는 것이 좋다 버전관리 및 연결 패키지들 버전 관리 위해 // package.json에서 관리 위해
2. 해당 cdn으로 불러오는 것 보다는 내 로컬 컴퓨터에서 불러올 수 있어서




웹팩이란
최신 프론트엔드 프레임 워크에서 가장 많이 사용되는 모듈 번들러
모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다

모듈이란?
모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다.

모듈 번들링이란?
웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 합니다.
빌드, 번들링, 변환 이 세 단어 모두 같은 의미입니다.

웹팩 설치
npm init -y
npm i webpack webpack-cli -D


위에 셋팅으로 그대로 하고 
package.json 커스텀 스크립트 명령어 확인

npm run build로 dist 생성



"scripts": {
  "build": "webpack --mode=none"
}





생성 했을 경우

// webpack.config.js
// `webpack` command will pick up this config setup by default
var path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};



"scripts": {
  "build": "webpack"
}


webpack.config.js 이걸 만들고 안에 코드들을 작성하면
 package.json에 "scripts": 에 주저리 코드를 쓸 필요 없다.


즉시 실행항수
 https://developer.mozilla.org/ko/docs/Glossary/IIFE


 웹팩은 자바스크립트 뿐만 아니라 웹을 돌리는 모든 리소스에 대해서 동작을 시킬 수가 있다.
 모는 모듈들을 하나하나 서버에 요청하면 요청횟수가 많아 인터넷이 느린곳에서는 문제가 발생 그래서 하나의 파일로 번들링을 해서
 한번만 요청을 하게 한다.

 웹팩은 장점은 js로 통한다. 웹 테스크 매니저와 다른게





웹팩의 등장 배경
웹팩이 등장한 이유는 크게 3가지입니다.

파일 단위의 자바스크립트 모듈 관리의 필요성
웹 개발 작업 자동화 도구 (Web Task Manager)
웹 애플리케이션의 빠른 로딩 속도와 높은 성능


웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다.



웹팩의 등장 배경에서도 살펴봤지만 웹팩에서 해결하고자 하는 기존의 문제점은 다음 4가지 입니다.

자바스크립트 변수 유효 범위
브라우저별 HTTP 요청 숫자의 제약
사용하지 않는 코드의 관리
Dynamic Loading & Lazy Loading 미지원 - Require.js와 같은 라이브러리를 쓰지 않으면 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능 했습니다. 
그러나 이젠 웹팩의 Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있습니다



babel 바벨
자바스크립트의 최신문법을 자바스크립트 구버전으로 변환



import, export 문밥은
자바스크립트 변수 범위를 파일로 지정하고
다른 곳에서 import해서 쓴다.





Output 파일 이름 옵션
앞에서 살펴본 filename 속성에 여러 가지 옵션을 넣을 수 있습니다.

결과 파일 이름에 entry 속성을 포함하는 옵션
module.exports = {
  output: {
    filename: '[name].bundle.js'
  }
};
결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션
module.exports = {
  output: {
    filename: '[id].bundle.js'
  }
};
매 빌드시 마다 고유 해시 값을 붙이는 옵션
module.exports = {
  output: {
    filename: '[name].[hash].bundle.js'
  }
};
웹팩의 각 모듈 내용을 기준으로 생생된 해시 값을 붙이는 옵션 
module.exports = {
  output: {
    filename: '[chunkhash].bundle.js'
  }
};
이렇게 생성된 결과 파일의 이름에는 각각 엔트리 이름, 모듈 아이디, 해시 값 등이 포함됩니다.
//빌드를 할 때마다 캐싱 때문에 그전에 이름으로 계속 가면 파일이 변경한 걸 브라우저가 인식을 못한다.
//그래서 청크해쉬나 해쉬값 같은 걸로 생성할 때마다 변경하게 처리해줘야한다.



플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성입니다. 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 보면 됩니다.

플러그인은 아래와 같이 선언합니다.

// webpack.config.js
module.exports = {
  plugins: []
}
플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있습니다. 예를 들어보겠습니다.

// webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ]
}
위의 두 플러그인은 각각 아래와 같은 역할을 합니다.

HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인


Entry 속성은 웹팩을 실행할 대상 파일. 진입점
Output 속성은 웹팩의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filename과 path를 정의
Loader 속성은 CSS, 이미지와 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있게 추가하는 속성. 로더는 오른쪽에서 왼쪽 순으로 적용
Plugin 속성은 웹팩으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용하는 속성. 웹팩 변환 과정 전반에 대한 제어권을 갖고 있음


//자바스크립트가 아닌 파일들을 빌드하고 전환시켜줄 때 로더



로더 확인
https://webpack.js.org/loaders/


플러그인 확인
https://webpack.js.org/plugins/



웹팩의 데브 서브는 코드만 바꿔도 자동으로 빌드를 해주는
계속해서 빌드를 해줄 필요가 없다.

코드의 변경사항이 발생하면 바로 빌드를하고 브라우저 새로고침을 한다.
그리고 메모리상에만 코드를 보여주는 것