[12주차] 3. Webpack

Webpack

• web application을 위해 사용하는 bundler(도구)
• 모듈 해석 -> 의존성 그래프 생성 -> 번들 생성
• 웹팩 설치 명령어 : yarn add webpack webpack-cli --dev
• 실행 명령어 : npx webpack
• npx webpack --target=node

---

Module

• 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태
• 한 파일에 쓰여진 큰 코딩 덩어리를 여러 개로 쪼개 사용 할 수 있음
• 어떤 기준을 통해 코드가 파일 단위로 분리되어있는 형태에서 서로를 참조
• js, sass, css, jpg, png 등
• module을 사용하기 위해서는 module을 인식하는 module system과 module을 다루는 키워드가 제공되어야 한다.(module이 어떤 표준을 따르냐에 따라 달라짐)
• module의 표준
  • commonJS(Node.js)
  • ESM(ECMAScript2015~)

장점

• 코드 재사용성 증가
• 코드 관리 편해짐
• 코드를 모듈화하는 기준이 명확해야 함

종류

1. Built-in Core Module(ex) Node.js module) : 내장되어 있는 코어 모듈
   • 실행환경에서 바로 사용할 수 있는 모듈
2. Communy-based Module(ex) NPM) : 커뮤니티 기반으로 제공되는 모듈
   • 개인이 만든 모듈을 외부에 공개하는 용도로도 사용 가능
   • npm의 경우 npm CLI를 사용해야 한다(ex) npm install 모듈이름)
3. Local module : 특정 프로젝트에 정의된 모듈
   • 로컬환경에서 만들어진 모듈을 의미

Module 다루는 키워드

1. 기능 가져오기: 모듈도 하나의 객체이기 때문에 모듈 가져올 땐 코딩 할 때 객체를 가져오고 참조하는 방식 동일하게 사용
2. 기능 내보내기

• 한 곳으로 내보내기
• 개별적으로 내보내기

CommonJS

• 기능 가져오기: require(참조하고자 하는 모듈의 경로)
• 기능 내보내기: module.exports에 내보낼 값 담기
• module.exports={…}
• module.exports=값
• module.exports.키_이름=값
• exports.키_이름 = 값 -> module.exports의 출력형
• module.exports나 export 중 한 가지 방식만 사용해야 한다.
• 터미널에서 해당 파일 실행 : node js파일

ESM

• 이 표준을 사용하기 위해선 외부 라이브러리 설치 필수 : yarn add esm
• 기능 가져오기: import 모듈이름 from 모듈위치
• 기능 내보내기: export{…}
• export default로 내보낼 경우 import에서 그 객체이름 정의해주고 그 이름을 통해서 가져올 수 있다.
• 터미널에서 해당 파일 실행 : node -r esm js파일
• -r은 commomJS말고도 다른 표준도 실행할 수 있게 해줌

---

Bundle

• 서로 참조관계가 있는 파일들을 모아서 하나의 파일로 만들어 주는 것
• 중요한 이유
• 모든 모듈을 로드하기 위해 검색하는 시간이 단축된다
• 사용하지 않는 코드 제거해줌(실제로 참조하는 코드만 남음)
• 파일의 크기 줄여줌

설정 파일

• webpack.config.js 설정
• 예시

// __dirname, path module

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  target: "node",
};

---

기본구조

• template engine : 데이터를 특정한 양식에 따라 출력 ex)hbs
• entry, output, mode , loader, plugin

설정 요소

• entry : 모듈의 의존관계를 이해하기 위한 어떤 모듈에서 시작해하는 지 시작점(제일 상위 요소) 설정
• output : webpack이 생성하는 번들 파일에 대한 정보(파일 위치, 이름 등) 설정

mode

• package.json
• dependencies : 어플리케이션 내부에 직접 포함되는 모듈, 설치시 : npm의 경우 --save
• devDependencies : 개발 과정에 필요한 모듈:npm의 경우 --save-dev
• npm과 yarn 등 통해서 모듈 설치하는 것이 아닌 package.json 작성하고 yarn add 작성해서 모듈 설치 가능
• package.json 에서 scripts 중괄호 안에 “build” : “webpack --config 웹팩이 읽을 config파일” -> yarn build
• fallback 설정은 기본적으로 production
• mode 설정 : webpack config 파일 export 중괄호 안에서 “mode” : ‘설정값’ 작성

Development

• 개발환경에 도움이 되는 설정
• 편의성을 위해 웹팩이 설정해놓음

Production

• production에 도움이 되는 설정
• 편의성을 위해 웹팩이 설정해놓음
• webpack.prod.js

none

• 사용자가 직접 작성한 설정한 내용들로 웹팩 사용 의미

webpack merge

• yarn add webpack-merge -dev
• merge 진행할 파일에서

const merge = require(‘webpack-merge’)
const common = require(‘webpack 공통 속성 작성된 webpack.common파일 주소’)

module.exports = merge(common, {추가할 속성 ex} mode: ‘production’});

Loader

• 의존성 그래프에서 다양한 모듈들을 입력받아 처리하는 역할
• 설정 방법

module.exports = {
  module: {
    rules: [loader1, loader2],
  },
};

• 설치해야 사용 가능

Plugin

• 번들링 전체과정에 여러가지 일을 할 수 있음
• 설정 방법

module.exports = {
    plugins: [new Plugin({…option}), …]

}

• template : 특정 파일 기준으로 생성

---

caching

• 사용자가 서비스를 이용하기 위해 기다리는 시간을 최소화하는 것으로 리소스를 효과적으로 이용
• 리소스 복사본을 가까운 위치에 놓고 재요청하지 않아 서버 부하를 덜어주고 리소스를 빨리 전달
• 수정사항 후 업뎃 했을 때 파일 이름에서 파일.cach값이 달라짐
• 다른 확장자 파일이 수정되어도 cach값 다시 지정되는 것을 방지하기 위해 contents-cach 지정