Webpack

Webpack 이란?

• Package Bundler : 종속성이 있는 모듈 ➡ 정적 자산(패키지화)
  - 여러 모듈을 번들로 묶어놓음으로써 HTTP 호출을 줄일 수 있다.
  

---

Installation

설치는 NPM(Node Package Manager) 명령어를 이용해 설치한다.

• npm init : 현재 프로젝트 경로에서 npm 시작
• npm install -D Webpack Wepack-cli : Webpack 설치

---

Concepts

Entry

• 의존성 그래프(dependency graph)의 시작 파일을 설정
• 시작 파일을 통해 직/간접적으로 의존성을 가진 모듈을 이해
• 기본 값: ./src/index.js

Output

• 의존성을 가진 모듈로 생성한 bundle의 결과물 위치를 지정
• 기본 값: ./dist/main.js

Loader

• Webpack은 모든 파일을 모듈로 관리하고 Javascript, Json만 이해할 수 있음.
• Loader는 Javascript, Json 외 다른 파일을 Webpack이 이해할 수 있는 모듈로 변환
• Loader는 파일 단위로 처리하며, npm을 사용해 추가

Plugins

• Plugin은 번들 단위로 번들 최적화, 자산관리 등을 실행

Mode

• 종류: production, developement, none
• 기본 값: production
• 모드 별로 config파일을 여러개 생성할 수 있다.
  - 기본 설정파일은 webpack.config.js ➡ npx webpack
  - webpack.config.dev.js ➡ npx webpack --config webpack.config.dev.js
  - webpack.config.prod.js ➡ npx webpack --config webpack.config.prod.js
  - 명령어는 packages.json에 명시하면 더 간단하게 사용 가능

Browser Compatibility

• IE8 이상의 ES5를 사용하는 모든 브라우저를 지원

---

Configuration

Options

project

 webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

webpack.config.js

1 const path = require("path");
2 
3 module.exports = {
4	mode: "developement", 
5	entry: "./src/index.js",
6	output: {
7		path: path.resolve(__dirname, "dist"), 
8		filename: "bundle.js",
9	}
10 } 

• 1번 라인: 파일 및 디렉토리 경로 작업을 위한 유틸리티를 제공하는 path 모듈
• 7번 라인: bundle 생성 경로
  - path.resolve(): Node.js에서 사용하는 메서드, 절대경로로 처리
  - __dirname: webpack.config.js가 위치한 경로
• 8번 라인: 생성할 bundle 이름

packages.json

npm init으로 생성한 packages.json에 Webpack 실행 명령어를 정의해놓을 수 있다.

• webpack.config.js 파일의 mode가 none인 경우

"scripts": {
		"build": "webpack",
        "development": "npm run build -- --env.mode=development",
        "production": "npm run build -- --env.mode=production"
    }

• webpack.config.js파일을 개발모드, 배포모드로 config파일을 쪼개 놓은 경우
  (개발: webpack.config.dev.js, 배포: webpack.config.prod.js)

"scripts": {
	"dev": "webpack --config webpack.config.dev.js",
	"build": "webpack --config webpack.config.prod.js"
}