[study] Webpack

해달·2023년 10월 10일

webpack

js application을 위한 정적 모듈 번들러이다.

여러 모듈 및 의존성을 갖는 프로젝트 파일들을 하나 또는 여러 개의 번들로 묶어서 최적화된 형태로 만들어준다.

주요특징

모듈 번들링
여러 모듈 및 의존성을 하나의 파일로 번들링
로더
다양한 유형의 파일을 js에서 사용할 수 있는 모듈로 변환하는데 사용되는 로더를 지원해준다.
ex) babel을 사용하여 ES6+ 코드를 ES5로 변환하는 등
플러그인
개발 서버
코드 스플리팅

module

프로그램을 구성하는 독립적인 구성 요소로,
특정 기능이나 작업을 수행하기 위한 코드와 데이터 조각을 나타낸다.

특징

독립성
다른 모듈과 독립적으로 존재하고, 자체적인 스코프를 갖는다.
재사용성
특정 기능을 수행하기 위한 코드와 데이터를 캡슐화하여, 동일한 기능이 필요한 곳에서 쉽게 재사용할 수 있다.
명시적 인터페이스
외부에 제공하는 명시적인 인터페이스를 가진다.
이를 통해 모듈 간의 상호작용이 이루어진다.
캡슐화
모듈은 자체적인 스코프를 갖고 외부에서의 직접적인 접근을 허용하지 않는다.
이는 모듈 내부의 상세 구현을 숨기고 외부와의 인터페이스를 통해 상호작용하도록 하는 캡슐화를 제공한다.

ES6 이후부터 import, export 키워트를 사용하여 모듈을 정의하고 사용할 수 있게 되었다.

웹팩이 필요한 이유

전역스코프가 오염이 되면 application이 예측할 수 없게 되고 ,
런타임 에러가 발생하게 된다.
이를 방지하고자 웹팩이 필요하다.

모듈 방식

이러한 문제를 해결하기 위해서 여러가지 방식의 모듈이 추가 되었다.

1.IIFE 모듈 (즉시 실행 함수)

정의되자마자 즉시 실행되는 함수다.
함수 내부에 독립적인 스코프가 생성이 된다.
내부에서 정의된 것은 외부에서 접근할 수 없기 때문에, 전역 스코프 오염을 막아준다.

(function () {
    statements
})()

2. CommonJS

자바스클비트를 사용하는 모든 환경에서 모듈을 하는 것이 목표다.
exports : 모듈 생성
require : 불러 들이는 방식

대표적으로 Nodejs에서 사용한다.

3. AMD (Asynchronous Module Definition)

비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표다.
외부에서 자바스크립트를 로딩해야되는 브라우저 환경에서 주로 사용된다.

4. UMD

AMD와 CommonJS 방식 모두 지원해주는 스펙

현재 사용하는 방식

ES2015에서 표준 모듈 시스템을 내 놓았다.
지금은 바벨과 웹팩을 이용해 표준 모듈 시스템을 사용하는것이 일반적이다.

export function sum(a,b) { return a + b };

import * as math from './math.js';

math.sum(1,2)//3

export 구문으로 모듈을 만들고, import 구문으로 가져올 수 있다.

브라우저의 모듈 지원

모든 브라우저에서 무관하게 모듈을 사용하고 싶을 때 웹팩을 사용한다.
웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러다.
하나로 합쳐진 파일을 번들 이라고 한다.

엔트리와 아웃풋

웹팩을 실행할 때 필수적인 옵션 세개

--mode
option : development, production, none
--entry
모듈의 시작점, 엔트리를 통해서 웹팩의 모든 모듈들을 하나로 합침
--output
합쳐진 모듈을 저장 할 경로를 설정하는 옵션

웹팩의 기본 설정을 정의해 놓는 파일 webpack.config.js

//node의 모듈 시스템
const path = require('path');

module.exports = {
  mode : 'development',
  entry : {
    main : './src/app.js'
  }
  output :{
   path :path.resolve('./dist'), // output directory 절대경로 
   filename: '[name].js' // 번들링 된 파일명 , 여기서는 엔트리에서 설정한 key값, main이라는 값으로 치환 됨
}

위와같이 filename을 정의하는 이유는,
엔트리가 여러개일 경우에 아웃풋도 여러개 존재해야 한다.
그 때 아웃풋의 이름을 동적으로 만들어 낼 수 있는 효과가 인다.

로더

웹팩은 모든 파일을 모듈로 바라본다.
JS로 만든 모듈 뿐만 아니라, CSS, image, font까지 전부 다 모듈로 처리한다.

es6에 import 키워드를 사용하면 이 모듈을 자바스크립트 코드안으로 가져와서 사용할 수 있다.

이게 가능한 이유는 웹팩에 로더가 있기 때문이다.

웹팩에서 로더가 하는역할

모든 파일을 자바스크립트의 모듈처럼 만들어준다.
이미지같은 파일을 데이터 URL같은 형식의 문자열로 변환한 다음 자바스크립트에서 이미지파일을 사용할 수 있게 해주는 것
📌 각 파일을 처리하는 역할, 처리할 파일의 패턴 명시, 패턴에 걸리는 것은 use에 설정한 loader함수를 돌린다.

로더는 함수 형태로 작성한다
로더가 그 파일을 읽고 읽은 내용이 인자로 들어옴

  // loader를 적용할 파일들의 패턴과 적용할 loader를 설정하는 부분
  module: {
    rules: [
      {
        test: /\.js$/, // loader가 처리해야 될 파일들의 패턴을 입력 js로 끝나는 모든 파일은 loader가 처리하겠다는 의미
        use: [path.resolve('./my-webpack.loader.js')]
        // 사용할 loader를 명시, 여기서는 my-webpack.loader.js를 사용하겠다는 의미
        // 모든 자바스크립트 파일을 my-webpack.loader.js가 실행되게 끔 설정

      }
    ]
  }

자주 사용하는 로더

css-loader

javscript에서 css파일을 모듈로 불러올 수 있다.

로더를 이용해 css파일을 모듈로 바꿔보자.

import './app.css'


// app.css
body {
  background-color : green;
}

// webpack.config.js
// <install> css-loader 
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader']

      }
    ]
  }

style-loader

js로 변경된 style 코드를 html에 넣어주는 로더

css 코드를 모듈로 사용하고 웹팩으로 번들링 하려면 css-loader, style-loader 두가지를 함께 사용해야 한다.

로더는 한 파일에 대해서 여러 개가 실행되는데 순서는 뒤에서 부터 앞으로 실행 된다

style-loader
css-loader

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader' , 'style-loader'] // 순서가 중요함

      }
    ]
  }

file-loader

css뿐 아니라 파일도 모듈로 사용하게 끔 만들 수 있다.
파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것을 file-loader 가 해준다.

// npm install file-loader
// webpack.js

module : {
  [
      {
        test: /\.png$/,
        loader : 'file-loader',
        options : {
          publicPath : './dist/', // prefix를 아웃풋 경로로 지정
          name: '[name].[ext]?[hash]' // [원본파일].[확장자]?[캐쉬무력화를 위해 매번 달라지는 해쉬값] 파일명 형식
        } 
      }
  ]
}

url-loader

이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 형식
url-loader는 이러한 처리를 자동화 해준다.

data-uri-scheme
"data:image/png;base64,~~"

url로더가 파일들을 처리할 때, limit에 기재되어있는 사이즈의 미만의
파일만 변환한다.

이상으로 될 때는, (따로 정의해놓은) 파일로더가 실행된다.

{
  test: /\.png$/,
  use: {
    loader: 'url-loader', // url 로더를 설정한다
    options: {
      publicPath: './dist/', // file-loader와 동일
      name: '[name].[ext]?[hash]', // file-loader와 동일
      limit: 5000 // 5kb 미만 파일만 data url로 처리
    }
  }
}

정리

css-loader
css파일을 css module처럼 사용할 수 있또록 css파일을 처리하는 로더
style-loader
css-loader를 통해 처리 된 javascript 문자열로 되어있는 style sheet코드를 html에 주입시켜 브라우저에 스타일이 적용되도록 하는 역할
file-loader
이미지 파일을 모듈로 사용할 수 있도록 변환하는 역할, 사용한 파일을 output폴더에 이동하는 역할
url-loader
base64로 인코딩해서 javascript 문자열로 변환

웹팩과 바벨에대해 좀 더 명확하게 알고 싶어서 강의를 들으면서
내용들을 정리해 봤다.

모듈이 정확히 어떤 것을 뜻하고,
웹팩은 어떤일을 하는지 어떻게 처리되는지 진행 과정을 알아보면서 번들링이 무엇을 뜻하는지 자세히 알게 되었다.

모듈은 프로그램을 구성하는 독립적인 요소,
웹팩은 여러 모듈을 로더를 이용해 ,
최적화 된 형태의 하나의 파일로 번들링하는 것!

reference (강의)

해달

이전 포스트

[study] iterator, type guard/narrowing

다음 포스트