[프엔 개발자를 위한 Webpack] 2.Webpack 개념과 구조

002

01.웹펙 시작하기

Webpack이란

Webpack은 최신 프엔 프레임워크에서 가장 많이 사용되는 ‘모듈 번들러’입니다.

module bundler : 웹 어플리케이션을 구성하는 자원(HTML, CSS, JS, Img 등)을 모두 각각의 모듈로 보고, 이를 병합해서 하나의 결과물을 만드는 도구를 의미합니다.
module : 프로그래밍 관점에서 특정 기능을 갖는 코드 단위입니다.

모듈 번들링이란

웹 어플리케이션을 구성하는 모든 자원들을 하나의 파일로 병합, 및 압축해주는 동작을 모듈 번들링이라 합니다.

Untitled

빌드, 번들링, 변환 세 단어는 같은 의미

Webpack 사용 vs Webpack 사용 전

HTTP 요청 갯수가 상당히 줄어들었습니다.
F12에서 느린 네트워크 환경을 조성해도 페이지 로딩 시간이 감소했습니다.

검사 탭 (F12)

우측 상단 No throttling → 네트워크의 지연 시간이나 가상환경의 옵션 설정이 가능합니다.

아주 느린 네트워크 환경을 커스텀해서 실습해보면 네트워크 지연 시간이 꽤 긴 것을 확인할 수 있습니다.

이와 관련된 설명 Youtube

https://www.youtube.com/watch?v=WQue1AN93YU

웹의 HTTP 요청 개수가 줄어드는 것을 확인할 수 있습니다.
웹 자동화 도구(웹 데스크 매니저)와 웹펙 구조가 다름을 확인할 수 있습니다.

Untitled 1 Untitled 2 Untitled 3

진입점을 하나로 만들고, 나머지 도구들을 연관 관계로 묶는다는 것이 포인트.

Webpack 결과물 구조

IIFE(Immediately invoked function expression) 익명함수 구조 입니다.
즉시 실행하는 함수 구조로 변환됩니다.

IIFE - 용어 사전

02.웹펙 소개

Webpack

웹펙은 단순히 JS 대상이 아닌, 웹 페이지를 구성하는 모든 자원과 관계된 도구라고 볼 수 있습니다.
즉 모든 도구들을 모듈화 시킬 수 있습니다. (모듈 번들링)

웹팩은 왜 필요할까?

파일 단위의 자바스크립트 모듈 관리의 중요성
1. 자바스크립트의 변수 유효 범위는 기본적으로 전역 → 변수의 이름을 모두 기억하지 않는 이상, 변수를 중복 선언하거나 의도치 않은 값을 할당할 수 있습니다.
2. 따라서 파일 단위로 변수를 관리하는 것이 중요하겠죠!
웹 개발 작업 자동화 도구
1. 예전부터 프엔 개발 업무를 할 때는 text편집기 → 저장 → 새로고침 → 결과 확인의 반복이 일어나야만 했습니다.
2. 웹 서비스를 배포할 때, HTML, CSS, JS, IMG 압축 및 CSS 전처리기 변환 작업을 거칩니다.
3. 위의 모든 것들을 자동화 시켜주는 도구가 필요했습니다!
웹 어플리케이션의 빠른 로딩 속도, 높은 성능
1. 초기 페이지 로딩 속도를 높이기 위해, 나중에 필요한 자원들은 나중에 요청하는 Lazy Loading 이 등장했습니다.
2. 웹펙은 기본적으로 필요한 자원은 미리 로딩하는 것이 아닌, 그 때 그 때 요청합니다.

웹펙이 해결할 수 있는 문제

자바스크립트 변수 유효 범위
1. ES6의 Modules 문법과 모듈 번들링으로 해결이 가능합니다.
브라우저별 HTTP 요청 숫자의 제약
1. 한 번에 서버로 보낼 수 있는 HTTP 요청 숫자는 제약되어 있어, 요청 숫자를 줄이는 것이 성능 향상 및 사이트 조작 시간 앞당겨줄 수 있습니다.
2. 웹펙을 이용해 여러 개의 파일을 하나로 합치면 숫자 제약을 피할 수 있습니다.
Dynamic Loading & Lazy Loading 미지원
1. 특정 라이브러리(Require.js)를 사용하지 않으면 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능 했습니다.
2. 웹펙의 Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있습니다.

HTTP 요청 숫자 관련

TCP 레이어의 네트워크 통신 레이어를 보면, TCP가 먼저 맺어진 후 HTTP를 보낼 수 있는데, 브라우저별로 한번에 보내지는 연결 횟수의 제약이 있습니다.

ex) 최대 연결 횟수가 6이면 파일이 100개(요청) → 6개씩 끊어 보낸다

03.바벨과 ES6 모듈 문법

Babel

https://babeljs.io/

JS의 최신 문법들을, 최대한 많은 브라우저에서 호환할 수 있도록 변환해주는 도구입니다.

ES6 Modules

자바스크립트 모듈을 가장 잘 다룰 수 있는 키워드는 import, export
import {불러올 변수, 함수 이름} from ‘파일 경로’
export 변수, 함수
위의 키워드를 사용해서 변수나 함수를 export, import 할 경우, js 파일별로 변수의 유효 범위가 구분되어 모듈 차원에서의 관리가 용이합니다.

04.웹펙의 주요 속성

webpack.config.js

var path = require("path");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "none",
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

mode

production : 배포
development : 개발
none : 그 외 (교육용 등)

entry

웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로입니다.

output

웹팩을 돌리고 난 결과물의 파일 경로입니다.
객체 형태로 옵션들을 추가해야 합니다.

loader

웹팩이 웹 어플리케이션을 해석(빌드할 때 모듈, 파일간의 관계 파악 = resolve)할때, 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, IMG, 폰트 등)을 변환할 수 있도록 도와주는 속성입니다.

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

test : ~에 대해
use : 해당 로더를 적용, 항상 오른쪽에서 왼쪽으로 읽히기 때문에 순서를 유의해야 합니다.

plugin

웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성입니다.
결과물의 형태를 바꿀 수 있습니다.

module.exports = {
  plugins: [new HtmlWebpackPlugin(), new webpack.ProgressPlugin()],
};

예시
- HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML을 생성해주는 플러그인
- ProgressPlugin: 웹팩의 빌드 진행율을 표시해주는 플러그인
- MiniCssExtractPlugin: 웹팩으로 빌드한 결과물로 css파일 분리해주는 플러그인 https://webpack.js.org/plugins/html-webpack-plugin/

전체 관계도

Untitled 4

출처 : 캡틴판교 웹팩 핸드북

본 게시물은 Inflearn ‘캡틴판교’님의 강의를 듣고 작성되었습니다.

Twitter Facebook LinkedIn