Webpack

 

Webpack 이란 ?

흩어져있는 CSS, js 리소스를 하나의 파일로 만들어 HTTP Request 비용을 줄여주며, 가져다 쓸때 편하고 기존 코드와 충돌을 피할 수 있도록 도와주는 자바스크립트 모듈 번들러이다.

사용법

1. 번들러 사용이 필요한 디렉토리가 npm을 사용해야 한다.

npm init

2. webpack 패키지 설치가 필요하다. 사용이 필요한 디렉토리에 webpack 을 설치해준다.
   그냥 인스톨이 아닌 개발용 옵션으로 설치한다.

npm install -D webpack webpack-cli

3. webpack.config.js 파일을 만든다.

webpack 공식 사이트에 config 예시가 나와있다. 참고해서 만들자.

https://webpack.js.org/configuration/

Configuration | webpack

 

const path = require("path"); // node.js 에서 파일 경로 핸들링 도움
 
module.exports={
    mode:"development", // 개발용 bundle.. "production"-> 운영배포용:변수가 숫자 등으로 더 간소화됨
    entry: {
       sdk : "./sdk.js", // 하나의 모듈로 묶을 대문 역할을 하는 파일
    },
    output:{
        path:path.resolve(__dirname, "public"), // 결과물 떨어트릴 디렉토리
        filename:'[name]_bundle.js', // entry에서 선언한 명칭이 [name] 에 들어감 
        library: {
            name : 'SDK', // library 가져다쓸때 이름
            type : 'global' // 어디서 사용할건지 ? this, window, global...
        }
    }
}

 

그럼 sdk_bundle.js 파일이 public folder 밑에 떨어진다.

이 라이브러리는 SDK라는 이름으로 global 에 선언된다.

sdk.js 에 개발됐던 init() 함수는 SDK.init()으로 호출하여 사용할 수 있다.

 

실행 : npx webpack --watch

(watch option : 코드 변경사항 발생시 바로 반영)