웹팩 Webpack

 Webpack은 모듈 번들러이다.

웹팩에서는 자바스크립트 , 스타일시트, 이미지 등 모든 것을 모듈로 보아 여러 개의 모듈을 하나의 파일로 묶어서 보낸다.

 

Webpack의 속성 1. Entry  2. Output  3. Loader  4. Plugin

1. Entry: 웹팩에서 웹자원을 변환하기 위해 필요한 최초 진입점이며 자바스크립트 파일 경로이다. 웹펙은 entry를 통해서 모듈을 로딩하고 하나의 파일로 묶는다.

require, @import 등 모듈 간의 의존성을 해석하며 의존성 트리를 생성, 하나 이상의 진입 포인트를 설정할 수 있다.

{

  entry: {

    app: './src/app.js'

  }

}

 

2. Output: 웹팩에서 entry로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치이다. 

매개변수 설정

{

  entry: {

     app: './src/app.js'

  },

  output: {

    path: '/dist',   // 결과물이 저장될 경로 지정

    filename: '[name].bundle.js'    // 결과물의 파일 이름 지정

  }

}

 

3. Loader: 웹팩은 기본적으로 자바스크립트와 JSON만 빌드할 수 있다. 자바스크립트가 아닌 다른 자원(HTML, CSS, Image)를 빌드할 수 있도록 도와준다. module과 rule이라는 키워드를 사용하여 아래와 같이 정의한다.

module: {

  rules: [

   {

      test: '빌드할 파일 확장자 정규식'

      exclude: '제외할 파일 정규식'

      use: {

        loader: '사용할 로더 이름'

         option: '로더 옵션'

      }

    }

  ]

}

 

4. Plugin: 웹팩의 기본적인 동작 외 추가적인 기능을 제공. loader는 파일을 해석하고 변환하는 과정에 관여하고 plugin은 결과물의 형태를 바꾸는 역할을 한다.

plugins: [

  new HtmlWebpackPlugin({

   template: 'public/index.html'

  })

]