Webpack 웹팩 , 모듈화 개념 훑어보기

 

 WEBPACK

웹 프로젝트에 포함된 많은 종류의 파일(Html, Js, Css) 을 모듈화,

빌드하여 1개의 파일로 만들어주는 '번들러' 이다.

* 여기서 모듈화란 재활용 혹은 편의를 위해 분리된 소프트웨어 덩어리 혹은 코드 파일을 말한다

 

 

 

웹팩과 표준 모듈화 시스템 등장 이전의 모듈화

파일단위로 JS, HTML 파일을 분리하여 <script> 태그를 통해 import 하였다.

여러 파일의 코드가 우선순위없이 중첩되거나 관리할 수 없이 꼬여 전역스코프가 오염되기 쉬웠다.

Node js 에서 사용하는 Common js 방식 (export - require) , AMD (비동기) 방식등이 있다.

 

ES5/ES6 (ECMA Script 2015, 2016) 이후 모듈화

ES5에서 본격적인 표준 모듈화 시스템이 도입되었다.

export default '모듈명' 과 같은 방식으로 모듈을 public 으로 내보낼 수 있게되었다.

 

웹팩 사용방법

1 .NPM으로 Webpack 패키지 설치 (-D 옵션 : 개발용 패키지 설치 옵션)

2. 루트 폴더에 webpack.config.js 정의 

3. webpack 실행하여 빌드

4. dist (혹은 별도 지정된 빌드파일 경로)에 빌드 된 파일을 <script>로 import

 

webpack.config.js 예시

//webpack.config.js
const path = require('path');

module.exports = {
	mode: 'development', //  or prouct : 개발용 모듈인지 배포용인지 *필수
    entry:{
    	main : './src/app.js' //빌드 시작경로 지정 *필수
    },
    output:{
    	filename : '[name].js',
        path: path.resolve('./dist'); //빌드 파일이 위치한 절대 경로 지정 *필수
    },
    module:{ //기타 로더 지정
    	rules:[
        	{
            	
            }
        ]
    }


}

 

웹팩 로더( webpack- loader )란?

다양한 종류의 파일(css, js, html)을 자바스크립트로 만들어 JS 코드 내에서 import 하여 읽어들일 수 있도록 모듈화해주는 장치

자주 쓰이는 로더는 다음과 같다.

 

- CSS-loader : CSS 파일을 Js로 모듈화

- Style-loader : Style 관련 파일을 인라인 스타일 혹은 <style> 태그 내부에 지정되도록 모듈화

- File-loader : File 경로 관련 처리

- url-loader : 작은 파일의 경우 base64 등의 확장자로 변환하여 네트워크 요청을 줄임

 

 

바벨 ( webpack- loader )란?

최신문법 자바스크립트 코드 및 JSX를 브라우저가 이해할 수 있는 버전의 코드로 트랜스 파일링(transpiling) 해주는 컴파일러이다.  

웹팩처럼 설치 후 환경 설정 문서 .babelrc / babel.config.js 를 만들어 사용한다.

 

 

 

Node js 사용이유
→ 브라우저 없이 개발환경에서 JS구동 가능
→ 패키지 매니저 (NPM 등) 을 통해 최적화된 개발환경 구축 가능
→ 코드파일 빌드, 압축, 난독화 가능 

 

 

NPM이란?
Node Package Manager. (주, 부, 수) 규칙으로 이루어진 유의적 패키지 버전 관리 매니저
NPM 이전에는 CDN 네트워크 주소를 사용해 직접 임포트

 

* 참고자료 : https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard