[Tech] 웹 팩

웹 팩

• 대표적인 번들러 도구
• 여러 개의 자바스크립트 모듈들을 하나의 파일로 묶어주는 역할을 함.
• React의 웹 팩 도구로, rollup이 있음.
• 장점: 전역 변수 충돌 문제 해결, 빌드 속도 향상

---

웹 팩의 주요 속성

webpack.config.js

• 웹 팩이 실행될 때 참조하는 설정 파일
• 웹 팩의 주요 속성과 관련된 설정 옵션들이 지정되어 있음.

• 예시

  module.exports = {
    mode: "development",
    entry: {
      main: "./src/app.js",
    },
    output: {
      filename: "[name].js",
      path: path.resolve("./dist"),
    },
  }
  
  

Entry, Output, Loader, Plugin, Mode

1. Entry

• 웹 자원을 변환을 위한 최초 진입점 (자바스크립트 파일 경로)

• 웹 애플리케이션의 전반적인 구조와 내용이 있어야 함.

• 여러 개의 파일을 하나로 묶어주는 역할을 하는 번들러이므로,
  다른 모듈을 사용하고 있는 최상위 JS 경로를 알아야 함.

  

• Entry 포인트는 여러 개일 수 있다.

  module.exports = {
    entry: "./src/app.js"
  };
  
  module.exports = {
    entry: {
      login: "./src/LoginView.js",
      main: "./src/MainView.js"
    },
  };
  
  

2. Output

• 웹 팩의 번들링된 결과물의 파일 경로
• Entry와는 다르게, 절대 경로로 설정한다.
  • 결과물이 프로젝트 디렉터리 내부라는 보장이 없음.

• 또한, filename, path 속성으로 경로 값을 객체로 설정해야 함.

    
  module.exports = {
    entry: "./src/app.js",
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist')
    }
  };   
    
  

  • filename: 번들링된 파일명
  • path: resolve 인자로 넘어온 경로를 조합하여 파일 경로를 생성

3. Loader

• 웹 애플리케이션을 해석 시, 자바스크립트 파일이 아닌 것들을 변환하도록 도와주는 속성.
  • 예: HTML, CSS, 이미지, 폰트 등..

• module이라는 이름으로 설정하며, rules이라는 속성을 정의해야 함.
  이 때, rules는 내부에 test, use라는 속성을 가지고 있다.

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

  • test: 변환해야 할 파일의 확장자
  • use: 변환해야 할 파일에 대해, 어떤 로더를 사용할 지 설정
    • 이 때, 오른쪽에서 왼쪽 순으로 우선 적용됨.

4. Plugin

• 웹 팩의 기본적인 동작에 추가적인 기능을 제공하는 속성

• Loader와는 다르게, 결과물의 형태를 바꾼다고 생각하면 됨.

• plugins라는 속성에 생성자 함수의 인스턴스만 나열하여 추가할 수 있다.

    
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const webpack = require('webpack');
  
  module.exports = {
    plugins: [ 
      new HtmlWebpackPlugin({ template: './src/index.html' }), 
      new webpack.ProgressPlugin()
    ]
  }; 
    
  

5. Mode

• 웹 팩의 실행 방법을 결정하는 속성
• 버전 4부터 해당 개념이 추가되었으며, 어떻게 빌드할 것인지 방식 설정 가능

• 파라미터 다음 중 하나만을 설정하여 사용한다.

  module.exports = {
    mode: 'production'
  };
  
  

  • production: 배포를 위한 빌드 모드, 파일의 크기가 최소화되어 빌드 됨 (기본 값)
  • development: 개발을 위한 빌드 모드, 빠르게 빌드 됨
  • none: 기본 최적화 옵션이 해제되어 빌드

---

✨ 출처

prepare_frontend_interview
Blog, [Webpack] 웹팩의 주요 속성

---