Webpack

Web front-end Build Tool 인 webpack

 

Webpack javascript 애플리케이션을 위한 Package Bundler이고, 종속성을 가진 어플리케이션 모듈을 정적 소스들로 생산합니다.

 

package bundler 란? 종속성을 가진 애플리케이션 모듈을 정적인 소스로 재생산 = 하나의 패키지화

 

특징은 아래와 같습니다

•  Loader를 통해서 javascript, img, font, css, scss 등과 같은 자산을 하나이 모듈로 취금
•  Entry 별로 Bundle 생성
•  Bundle에 대한 압축 및 난독화, Source Map에 대한 옵션 제공
•  Plug-In 사용을 통한 사용자 정의 
•  비동기 I/O와 다중 캐시 레벨을 사용하기 때문에 컴파일 속도 빠름
•  Commonjs(noejs)와 AMD(requires) 스펙 지원

 

Webpack을 사용하려면, Webpack과 webpack-cli 패키지를 설치 합니다

weppack은 핵심 패키지이며, webpack-cli는 webpack 커맨드를 실행 할수 있게 해주는 커맨드 라인 도구 입니다.

두개의 패키지 모두 개발 할때만 필요한 의존성이기 때문에 -D 옵션을 설정 합니다.

$ npm i -D webpack

$ npm i -D webpack-cli

npx webpack 커맨드를 실행시키면, 웹팩이 소스 디렉토리 안의 (예시) index.js 파일과 그안의 import 되어 있던 (예시) Moment.jst 패키지 까지 읽어들여 하나의 파일 번들로 묶은 후 배포 디렉토리 /dist 파일 안에 main.js 파일로 만들어 줍니다.

이 과정을 번들링 이라고 합니다.

$ npx webpack

브라우저가 해석해야 하는 코드의 크기를 줄여주고, 웹 애플리케이션의 성능도 좋아 집니다.

 

Webpack은 크게 Entry, Output, Loader, Plugin 4가지로 나눕니다.

 

Entry - webpack은 모든 애플리케이션에 대한 종속성 그래프를 작성하고, 이 그래프의 시작점을 Entry Point라고 합니다. 다. Entriy Point를 통해 모듈이 어디서 부터 시작 하는지 명세하는 애플리케이션을 시작하는 첫번째 파일로 나타냄.

Output - Output은 애플리케이션 자산(resource)를 하나의 Bundle로 묶었으면, Bundle을 처리하는 방법을 명세 함.

Loader - Loader는 사전에 처리할 작업을 나타내며, css, html, img, scss 등의 자산을 하나의 모듈로 취급하며 이러한 파일들을 종속성 그래프로 추가할때 모듈로 변환 함.

Plug-in - Plug-in은 일반적인 컴파일러 또느 모듈처리에 필요한 작업 및 사용자 정의 기능을 수행 함.

 

설정파일 설정시

npm 프로젝트를 초기화 후 webpack과 webpack-cli 패키지를 설치 합니다. 그런후 default로 인지하는 설정파일 이름인 weppack.config.js로 빈 설정 파일 하나를 만들면 됩니다

설정 파일 이름을 default가 아닌 다른 이름으로 설정 하려는 경우 --config 옵션을 사용합니다

$npm init -y  // 초기화

$npm i -D webpack webpack-cli // webpack 외1 패키지 설치

$npx webpack --config [설정 파일 이름] // config 파일 변경시

 

다른 모듈을 사용하고 있는 최상위 javascript 파일이 어디에 있는지 알아야 하며, 설정 파일에 이를 Entry 속성으로 명시 합니다. 이 Entry 속성에 명시된 파일을 기준으로 의존성 트리를 생성 하는 번틀 파일이 만들어 냅니다.

 webpakc.config.js

module.exports = {
	entry : "./script.js",
}

script.js

const msg = document.createTextNode("test")
doucment.body.appendchild(msg)

npx webpack을 실행하면, script.js파일을 읽고, /dist에 main.js 파일을 묶어 냅니다.

 

output 설정은 번들링 결과가 /dist/main.js인 이유는 설정이 다음과 동일하기 때문입니다.

output설정을 통해서 이값을 다른 디렉토리와 파일로 변경이 가능합니다.

webpack.config.js

module.exports ={
 entry:"./script.js"
 output : {
  path : _dirname
  filename : "build.js"
 }
}

 

Loader 설정은 Loader를 이용하여, css, img, font, 등 다양한 종류의 파일을 함께 번들링 가능 합니다.

설정파일을 열고 module 속성을 추가하고, 그안에 rules 속성을 통해 처리 규칙을 등록 합니다.

test 항목에 정의된 정규식에 매칭되는 파일은 use 항목에 등록된 로더를 통해서 처리하게 됩니다

test 항목에 css 파일만 인식하도록 설정하고 use 항목에 style-loader와 css-loader를 차례로 나열하였습니다

module.exports ={
 entry:"./script.js"
 output : {
  path : _dirname
  filename : "build.js"
 }
 module : {
  ruels : [
   {
    test : /\.css$/,
    use : ["style-loader", "css-loader"],
   },
  ],
 },
}

plug-in설정방법은 loader로 설정이 애매한 부분을 커버가 가능합니다. 기존에 있던 bundle 파일을 지우고 싶은 경우 clean-webpack-plugin을 사용할수 있습니다

 

$npm i -D clean-webpack-plugin

plugin 속성에 import한 플러그인을 추가 합니다

module.exports ={
 entry:"./script.js"
 output : {
  path : _dirname
  filename : "build.js"
 }
 module : {
  ruels : [
   {
    test : /\.css$/,
    use : ["style-loader", "css-loader"],
   },
  ],
 },
 plugin : [new CleanWebpackPlguin("build.js")]
}

 

참고자료 - 문제가 되었을시에 삭제 하도록 하겠습니다.

 

https://kdydesign.github.io/2017/07/27/webpack/

Webpack 개념잡기

https://www.daleseo.com/webpack-config/

웹팩(Webpack) 기본 설정법 (Entry/Output/Loader/Plugins)