Webpack 검색 결과 정리.

Webpack?

webpack.js.org 사진

: 여러 자바 스크립트 파일을 합쳐 하나(또는 하나 이상일 수도 있음)의 번들(묶음)로 변환시켜 주는 '정적 모듈 번들러'.

즉, 각각의 스크립트 파일들이 따로 렌더링 되는 것이 아니라, 미리 정적 모듈로 만들어진 하나(또는 소수의) 큰 번들을 렌더링 시킴으로써 유저가 더 빠른 시간 안에 서비스받을 수 있게 만들어주는 기능.

 

> Module

- 프로그램 구성 요소. 관련 데이터와 함수를 하나로 묶은 단위.

 

> Dynamic shared objects?

: DSO. 실행중에 여러 애플리케이션이나 파일에서 동시에 또는 공유하여 사용할 수 있는 객체 파일. 

 

> Mosel Langage?

- 모델링 언어나 프로그램언어 모두를 통칭할 수 있는 언어.

Modeling Language -> UML (Unified Modeling Language)

: 소프트웨어의 밑그림을 그리기 위한 언어로, 특히 UML의 경우 공통적으로 의사소통을 위해 사용할 수 있는 모델링 언어 표준으로 사용되는 언어이다.

 

> DOM : Document Object Model 

도큐먼트의 논리적 트리 구조를 나타낸다. 각 트리으 브랜치(가지)는 마지막에 노드를 갖고, 노드에는 객체가 담긴다. DOM 트리를 통해 프로그램적인 접근이 가능하며, 이를 통해 도큐먼트의 구조, 스타일 또는 내용을 변경할 수 있다.

 

> CSSOM : CSS Object Model

- Document의 스타일 관련된 정보를 읽어 적용시키는 일련의 API 집합. DOM이 도큐먼트 구조와 내용을 자바스크립트로부터 읽어 들여 수정하는 것을 허용하는 것 같이, CSSOM도 자바 스크립트로부터 도큐먼트의 스타일을 읽어 들여 수정하는 것을 허용한다.

 

---

웹팩을 사용하면,

Entry 포인트로 지정한 './src/index/js' (또는 지정가능) 파일로 부터 시작해 모듈들을 통합 한 후,

output 파일을  './dist/main.js' (별도 지정가능)에 생성한다.

 

*** entry point 또는 output파일 생성 경로 별도 지정시 'webpack.config.js'파일에 지정.

module.exports = {
	entry : '엔트리포인트 파일 경로',
    output : {
		path : path.resolve(__dirname, '폴더명'),
        filename: '파일명 지정',
	},
};