Webpack

smooth97·2019년 10월 30일
0

Module

프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태
분리되어 있는 다른 파일의 코드를 참조해 재사용성을 높힌다.

  • 코드의 재사용성이 증가한다
  • 코드의 관리가 편해진다
  • 코드를 모듈화하는 기준이 명확해진다

모듈의 구조

  • CommonJS (Node.js)
    • require(모듈의 경로)
      • module.exports
  • ESM (ECMAScript 2015 ~)

Module Keyword

  • import

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

    • 모듈 객체를 참조하는 형태

Module의 종류

  • Built-in Core Module (내장된 모듈 ex : Node.js module)
  • Community-based Module ( 외부 모듈 ex : NPM )
    • npm CLI를 사용해서 install
  • Local Module ( 특정 프로젝트에 정의된 모듈)

Bundle

모듈들의 의존성을 안전하게 유지시키면서 하나의 파일로 만드는 과정을 번들링이라 한다.

  • 모든 모듈을 로드하기 위해 검색하는 시간 단축

여러 파일을 하나로 합쳐주기 때문에 파일을 읽는 시간과 모듈을 검색이 빨라진다.

  • 사용하지 않는 코드를 제거해준다.

모듈 내에서 기능을 내보낼 때 사용하지 않는 기능은 번들링 과정에서 제거된다.
때문에 파일크기가 감소하며 앱이 빨라지는 효과가 있다.

  • 파일의 크기를 줄여준다

별도의 파일들을 압축하는 것 보다 번들링을 통해 하나로 압축하는 것이 파일의 크기를 더 줄여준다.

Webpack의 기본구조

웹팩 필수 개념 4가지

  • entry
  • output
  • loader
  • plugin

Entry & Output

Entry - 모듈의 의존 관계를 이해하기 위한 시작점을 설정

Output - Webpack이 생성하는 번들 파일에 대한 정보를 설정

package.json을 만드는 명령어인 npm init -y을 실행한다.

package.json

{
  "name": "Webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm install webpack webpack-cli --save-dev

웹팩을 실행할 수 있는 명령어를 지원하는 패키지를 설치해준다.

이렇게 node-modules 폴더가 생성됐고 package.json에 devDependencies가 추가됐다.

"devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }

이제 웹팩 명령어를 실행해서 번들파일을 만들어 보자

src 폴더를 만들어 js 모듈파일들을 넣어주고 dist폴더를 생성한 뒤

npx webpack --target=node 터미널에서 명령어를 입력한다.

dist 폴더에 main.js 파일에 src에 파일들이 번들링되서 하나로 합쳐졌다.

Webpack 설정

Webpack 활용

profile
Front-end 개발 공부일지

0개의 댓글