webpack 기본-1. 개념 및 용어와 명령어 정리

webpack 이란?

webpack은 모듈 번들러(Module Bundler)이다.

번들러(Bundler)

소프트웨어 및 일부 하드웨어와 함께 작동하는데 필요한 모든 것을 포함하는 패키지다.

모듈(Module)

개발하는 어플리케이션의 크기가 커지면서 파일을 여러 개로 분리해야하는 시점이 오는데 이때 분리된 각각을 '모듈(module)'이라고 한다. 네이티브 자바스크립트 모듈은 import 와 export문에 의존적이며, 최신브라우저에만 반영이 된다.

1. 여러개의 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담을 줄일 수 있어, 더 빠른 서비스를 제공
2. 여러개의 서로 다른 패키지들이 서로 같은 이름의 전역 변수를 사용하면 프로그램이 오작동하여, 이런 문제를 극복하기 위해 등장한 것이 모듈
3. 많은 플로그인들이 존재하여 웹 개발시에 필요한 다양한 작업을 자동화 할 수 있음

import

"수집하다", "땡겨오다" 라는 뜻이며 inport를 하면 export default 뒤에 있는 값을 사용할 수 있다.

// import 할 js 파일
import hello_word from './module1.js';
import word_word from './module2.js';
import  './style.css';

export

자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼때 사용

// 내보낼 js 파일
let word = 'hello';
export default word;

 

npx webpack

webpack 을 실행하는 명령어

// CLI
npx webpack