Webpack 알아보기 (3)

삔아·2021년 11월 6일
webpack
0

webpack

목록 보기
3/4
post-thumbnail

4. Webpack Dev Server

💡 webpack-dev-server는 라이브 리로드 기능을 제공하는 개발용 서버입니다.

빌드를 실행하면 번들링된 파일을 생성하기 때문에 규모가 큰 프로젝트라면 빌드에 시간이 걸리는데요.
Webpack-dev-server는 실제 번들링된 파일을 생성하지 않고 번들링된 결과를 메모리에 저장하기 때문에 빌드 속도가 빠릅니다.
따라서 개발 시에는 매번 빌드를 실행하지 않고 webpack-dev-server를 사용하는 편이 좋습니다.

(1) 웹팩 데브 서버 가 필요한 이유

만약 plugin 이 적용되지 않은 상태 에서 css파일 내부에 있는 p태그의 색상을 변경해준다면.

다시 npm run build 를 해주어야 변경된 상태를 확인하실 수 있습니다.

이처럼 코드가 한 줄 한 줄 변경 될 때 마다, npm run build 를 실행시켜주어야 하는데, 이럴 필요가 없는 것이 바로 Wepback dev server 입니다.

즉, 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다.

매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용됩니다.

(2) 웹팩 데브 서버의 동작 원리

  1. 서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시
  2. 소스 파일이 변경되면 변경된 모듈만 새로 번들링
  3. 변경된 모듈 정보를 브라우저에 전송
  4. 브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드

(3) 웹팩 데브 서버 의 특징

💡 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않습니다.

좀 더 구체적으로 얘기하자면 웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지는 않기 때문에 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 순 없습니다.

따라서, 웹팩 데브 서버는 개발할 때만 사용하다가 개발이 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성해야 합니다.

컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 컴퓨터 자원이 덜 소모됩니다.

웹팩 데브 서버 2가지 특징

1) 코드를 변경하고 저장할 때 바로 화면에 반영이 된다.

2) 코드를 변경하고 저장할 때 마다 컴파일이 진행이 된다.

dist 폴더가 없는 상태 이지만, 네트워크 패널에서는 bundle.js 를 확인 할 수 있습니다.

( 우리 눈에 보이지 않은 상태 ) ⇒ 이는 웹팩 데브 서버가 인메모리 기반으로 웹팩의 빌드 결과물을 변환해놓습니다.
메모리상으로만 빌드를 올려놓고 파일시스템으로는 안보이는것이 웹팩 데브 서버의 특징 입니다.

(4) 적용해보기

  1. 빈 폴더에서 아래 명령어로 package.json 파일을 생성

npm init -y

  1. 아래 명령어로 필요 라이브러리 설치

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

  1. package.json 파일에서 아래와 같이 scripts 속성에 커스텀 명령어를 추가
{
  // ...
  "scripts": {
    "dev": "webpack-dev-server"
  },
}
  1. 프로젝트 루트 레벨에 index.html 파일 생성 후 내용 추가
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Dev Server</title>
  </head>
  <body>
    <!-- 빌드 결과물이 정상적으로 로딩되면 아래 div 태그의 텍스트가 변경됨 -->
    <div class="container">
      TBD..
    </div>
    <!-- HTML Webpack Plugin에 의해 웹팩 빌드 내용이 아래에 추가됨 -->
  </body>
</html>
  1. 프로젝트 루트 레벨에 index.js 파일 생성 및 아래 내용 추가
var div = document.querySelector('.container');
div.innerText = 'Webpack loaded!!';
  1. 웹팩 설정 파일 webpack.config.js 생성 후 아래 내용 추가
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      // index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
      template: 'index.html',
    }),
  ],
};
  1. 명령어 입력 창에 npm run dev 를 입력하여 웹팩 데브 서버 실행
  2. localhost:9000에 접속 후 아래와 같이 화면이 뜨는지 확인

⚠️ 참고
package.json 의 scripts 에 webpack-dev-server 가 아닌 webpack serve 로 작성할 수 도 있습니다.

5. Webpack 5

💡 Smaller bundles, faster build times, stricter checks, and fully typed

맨 처음에 안내 해드렸듯이 여기까지 웹팩 4버전 기준으로 설명을 드렸었는데요.
최신 버전인 웹팩 5버전의 주요 변경 사항과 개선 사항에 대해 가볍게 살펴보겠습니다.

(1) Webpack 5의 새로운 기능

1. 영구 캐싱으로 더 빠른 빌드

웹팩에 대해 개발자들의 공통적인 불만 중 하나는 바로 느린 속도의 빌드 였습니다.

하지만 이제 opt-in 파일 시스템 캐시를 제공 함으로써 개발 빌드 속도를 올려 생산성을 향상 시킵니다.

module.exports = {
  cache: {
    // 1. 캐시 유형을 filesystem 으로 설정
    type: 'filesystem',

    buildDependencies: {
      // 2. 캐시 무효화를 얻기 위해 buildDependcies 를 추가 합니다.
      config: [__filename],

      // 3. 별도의 build depend 들을 추가 할 수 있습니다.
      // webpack, loader 및 config에서 참조하는 모든 모듈이 자동으로 추가 됩니다.
    },
  },
};

2. 더 작은 번들 크기

Tree-shaking 이 개선되었습니다. 공식 문서 보기

3. 더 나은 장기 캐싱

캐싱을 사용하면 애플리케이션을 다시 방문하는 이용자가 아주 빠른 로딩 경험을 할 수 있는데요.

웹팩 5에서는 주석 또는 변수 이름과 같은 최소화된 버전 ( minimized version)을 변경하지 않는 코드 변경으로 인해 캐시가 무효화 되지 않습니다.

즉 사용자가 캐시 성능 향상을 더 오래 경험 할 수 있게 됩니다.

webpack 5는 또한 WebAssembly, Async Web Assembly, Top Level Await를 지원하고 번들을 모듈로 출력하는 새로운 실험 구성 옵션을 제공합니다(이전에는 롤업에서만 가능).

⚠️ Webpack 4에서는 cache-loader를 사용하여 가장 활동적인 loader의 결과를 디스크에 캐시했습니다(예: babel-loader, vue-loader 등).

(2) 주요 변경 사항

1. 더 이상 사용되지 않는 항목 제거

버전 4에서 더 이상 사용되지 않는 것으로 표시된 모든 항목이 제거되었습니다.
webpack 4 빌드가 사용 중단 경고를 인쇄하는 경우 업그레이드하기 전에 해당 문제를 해결해야 합니다.

2. 내장 플러그인 변경 사항

플러그인 IgnorePlugin 및 BannerPlugin은 서로 다른 인수를 허용합니다.

3. Node.JS의 polyfills 제거

이전 버전의 웹팩에서는 암호화와 같은 기본 NodeJS 라이브러리에 대한 polyfills이 포함되었지만 웹팩 5로 들어오면서 부터 제거되었습니다.
대신 프론트엔드 중심 라이브러리를 사용하거나 polyfills 을 직접 설치해야 합니다.

마무리..

해당 정리글은 웹팩의 맛보기만 보았는데요.
막상 작성 하고 나니 부족한 점, 아쉬운 점 이 더 많아 더 세부적인 사항은 따로 시간 내서 조금 더 파고들 욕심이 생기기도 합니다. ( 소스맵이라던지, HMR이라던지 ... )

웹팩이 무엇인지, 웹 사이트 최적화를 위해서 어떻게 설정 파일을 구성하는 것이 좋을지 깊게 생각해보는 유익하고 재미있는 공부 였습니다.

감사합니다.

profile
삔아
Frontend 개발자 입니다, 피드백은 언제나 환영 입니다
이전 포스트

Webpack 알아보기 (2)

다음 포스트

Parcel vs Rollup vs Webpack 비교

0개의 댓글