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 네트워크 주소를 사용해 직접 임포트