Webpack - 1. 수업소개

이고잉님의 웹팩 강의 리스트를 들으면서 정리합니다.

번들러

• 수 많은 파일을 사용하는 웹 프로그램의 효율성을 높이고 외부 부작용(변수, 함수 등의 이름 충돌이 대표적)을 없애기 위한 파일 압축 시스템, 모듈 압축 시스템

• 번들러에서 가장 중요한 것이 webpack

• 번들링이 왜 필요한지?

  → 웹 페이지에 필요한 스크립트, css 등의 파일을 정말 많다. 이 파일들을 페이지가 랜더될 때마다 불러온다면 어마어마한 부하가 걸릴 수 있다. (컴퓨터 사양에 따라 다르고, 요즘은 꼭 그렇지는 않지만 성능 차이는 무시 못한다.) 그래서 우리는 번들링을 통해서 1개의 파일에 모든 코드를 넣는 것이다.

프로젝트에 웹팩 반영하기

npm i -D webpack webpack-cli

src 폴더의 index.js 파일의 코드들을 public 폴더로 번들링하기

npx webpack --entry ./src/index.js --output ./public

• 나같은 경우에는 —output 명령어를 먹지 못해서 —output-path 로 경로를 지정했다.