webpack_JC

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'
    }
  

• 소스 맵 설정 옵션 비교표