🦁_22.01.18 TIL

22년 01월 18일

📝 webpack

📎 webpack을 사용해야 하는 이유

브라우저에서 JavaScript가 동작하는 두 가지 방법

1. 하나의 큰 자바스크립트 파일로 개발
   => 유효범위와 크기, 가독성, 유지보수에 문제가 발생
2. 각 기능이 있는 스크립트를 모듈화해서 개발
   => 너무 많은 스크립트 파일을 로드할 경우, 네트워크의 병목현상을 발생
   => 여러 개의 파일을 로딩하더라도 같은 스코프를 공유하기 때문에 전역 변수의 충돌 발생

=> 이러한 문제를 해결하기 위해 모듈 번들러를 사용

Module bundler(모듈 번들러)

bundle : 묶음, 보따리

• 여러 개의 파일들을 하나의 파일로 만들어주는 라이브러리
  => 여러 개의 자바스크립트 파일을 하나의 파일로 묶어 한 번의 요청을 통해 가져올 수 있다.
  => 자바스크립트 코드를 압축하고 최적화 하여 로딩 속도를 높일 수 있다.
  => 모듈 단위로 개발 가능, 가독성과 유지보수가 용이
  => 최신 자바스크립트 문법을 브라우저에서 사용 가능

📎 webpack Concepts

Entry

• entry는 webpack이 빌드할 파일의 시작 위치를 나타냄
• entry 지점으로부터 import 되어있는 다른 모듈과 라이브러리에 대한 의존성을 찾는다.
• entry의 기본 설정값 = ./src/index.js

// webpack.config.js 
// entry를 ./path/to/my/entry/file.js로 설정
module.export = { 
  entry: './path/to/my/entry/file.js' 
  
  // 여러개의 entry 선언이 가능합니다. 
  //  entry: { 
  //  index: './path/to/my/entry/index.js', 
  //  file: './path/to/my/entry/file.js' 
  //}  
}

Output

• output은 웹팩에 의해 생성되는 번들을 내보낼 위치와 파일의 이름을 지정
• output의 기본 설정값 = ./dist/mainjs
  • output.path : 번들된 파일을 내보낼 디렉코리 위치 지정
  • output.filename : 번들된 파일 이름을 지정

// webpack.config.js 
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
  
  // 여러 개의 entry가 정의되었을 경우, 아래와 같은 설정이 필요
 // output: {
 //   path: path.resolve(__dirname, 'dist'),
 //   filename: '[name].js'
 // }
}

Loaders

• webpack은 기본적으로 JavaScript와 JSON 파일만 이해
• loaders를 통해 webpack이 다른 유형의 파일을 처리할 수 있도록 유효한 모듈로 변환
  • test 프로퍼티 : 변환할 파일 지정
  • use 프로퍼티 : 변환할 파일에 지정할 로더를 설정

// webpack.config.js 
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

Plugins

• loaders는 모듈을 처리하고, plugins는 번들된 파일을 처리
• plugins는 번들된 파일을 난독화 하거나, 압축

// webpack.config.js 
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Mode

• mode의 3가지 옵션
  • production : mode의 기본값, 각 설정마다 내장된 최적화 옵션을 자동으로 설정
  • development : 빠르게 빌드
  • none : 아무 기능없이 webpack이 빌드

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

📎 정리

• webpack은 entry로 설정된 시작점에서 의전성을 가진 모든 파일을 압축하여 output 지정에 하나의 자바스크립트 파일을 만들어 준다.
• 이때, 자바스크립트가 아닌 파일은 loaders를 통해 자바스크립트에서 유효한 모듈로 변환하고, plugins를 이용하여 번들된 자바스크립트를 난독화하거나 압축한다.
• mode는 webpack의 사용 목적에 따라 설정을 지적하는 역할을 한다.

참고링크

• webpack
• 웹팩이란 무엇인가
• webpack 개념
• 웹팩 개념 알아보기