Webpack

📌 Webpack 이란?

• 모듈 번들러(Module Bundler)
  • 모듈: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위
  • 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구
  

📌 웹팩으로 해결하고자 하는 문제

• 자바스크립트 변수 유효 범위
• 브라우저별 HTTP 요청 숫자의 제약
• 사용하지 않는 코드의 관리
• Dynamic Loading & Lazy Loading 미지원
  • 웹팩의 Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있다.

📌 웹팩의 4가지 주요 속성

• entry

  • 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로

  •   module.exports = {
        entry: './src/index.js'
      }
    

  • entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다.

• output

  • 웹팩을 돌리고 난 결과물의 파일 경로

  •   const path = require('path');
    
      module.exports = {
        output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, './dist')
        }
      }
    

  • filename: 웹팩으로 빌드한 파일의 이름
  • path: 해당 파일의 경로를 의미

• loader

  • 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성

  •   module.exports = {
        module: {
          rules: [
              {
                  test: /\.css$/,
                  use: ['css-loader']
              }
          ]
        }
      }
    

  • test : 로더를 적용할 파일 유형
  • use : 해당 파일에 적용할 로더의 이름
  • 로더 적용 순서: 오른쪽에서 왼쪽 순으로 적용됩
  • 자주 사용되는 로더
    • babel Loader
    • css-Loader
    • file-Loader

• plugin

  • 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성
  • loader는 파일을 해석하고 변환하는 과정에 관여하는 반면, plugin은 해당 결과물의 형태를 바꾸는 역할을 한다

  •   var webpack = require('webpack');
      var HtmlWebpackPlugin = require('html-webpack-plugin');
    
      module.exports = {
        plugins: [
          new HtmlWebpackPlugin(),
          new webpack.ProgressPlugin()
        ]
      }   
    

  • HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
  • ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인

📌 요약

• Entry 속성은 웹팩을 실행할 대상 파일. 진입점
• Output 속성은 웹팩의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filename과 path를 정의
• Loader 속성은 CSS, 이미지와 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있게 추가하는 속성. 로더는 오른쪽에서 왼쪽 순으로 적용
• Plugin 속성은 웹팩으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용하는 속성. 웹팩 변환 과정 전반에 대한 제어권을 갖고 있음

📌 웹팩 실행 모드 - mode

• 웹팩 버전 4부터 mode라는 개념이 추가

  • none : 모드 설정 안함
  • development : 개발 모드
  • production : 배포 모드(default

• development mode인 경우에는 개발자들이 좀 더 보기 편하게 웹팩 로그나 결과물이 보여지고, production mode인 경우에는 성능 최적화를 위해 기본적인 파일 압축 등의 빌드 과정이 추가됩니다.

📌 소스 맵 - devtool

• 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능

• 번들 파일의 특정 부분(주로 에러가 발생한 부분)이 원본 소스의 어떤 부분인지 확인하고 싶을 때 유용

•   module.exports = {
      devtool: 'cheap-eval-source-map'
    }
  

• 소스 맵 설정 옵션 비교표

• 📌 Advanced

  • file loader vs url loader

    • url-loader은 이미지 파일을 base-64로 변환하여 이미지 파일을 번들 파일에 포함 시키는 기능을 가지고 있다.
    • 이미지 파일을 번들 파일에 포함 시킴으로써 파일 요청 횟수를 줄일 수 있다. 그러나 파일이 너무 크면 안하는게 좋다.
    • https://jeonghwan-kim.github.io/js/2017/05/22/webpack-file-loader.html

  • 나무 흔들기(tree shaking)

    • (번들시) 불필요한 코드를 제거해 주는 기능
    • 기본적으로 제공 되어 있다

    //util.js
    export const func1 = () => {
      console.log('func1');
    }
    export const func2 = () => {
      console.log('func2')
    }
    //use.js
    import { func1 } from ./util.js
    func1();

    • 위 코드 번들시에 func2는 번들에 안들어가 있다.(treeshaking)
    • tree shaking 실패 하는 경우
      • 사용되는 모듈이 ESM이 아닌 경우
      • 사용하는 쪽에서 ESM이 아닌 다른 모듈 시스템을 사용하는 경우
      • 동적 임포트를 사용하는 경우
    • 외부 패키지 tree shaking

    //잘못된 예
    import { fill } from 'lodash'
    //잘 사용한 예
    import fill from 'lodash/fill'

  • 코드 분할

    • 번들을 작게 분할해서 사용.
    • 그때그때 필요한 코드가 들어가 있는 번들만 사용
    • 불필요한 코드까지 전송 되는것을 방지
    • 작게 분할하여 페이지 렌더링 최소화

  • ProvidePlugin

    • 설정한 모듈을 자동으로 등록 해준다.

    new webpack.ProvidePlugin({
        React: 'react'
    })

    • 위 코드를 사용시 React를 자동으로 등록 해줌으로써 매번 import React from 'react'를 쓸 필요거 없어진다.