webpack이란?

Webpack 이란?

 

[ 목차 ]

1. webpack의 등장 배경

2. Webpack의 개념

3. Webpack의 필요성

4. Webpack의 장단점

5. webpack의 Concepts

 

---

 

1. Webpack 의 등장 배경

webpack이 만들어진 배경을 보면 왜 webpack을 사용하지는 알수있습니다. 잠시 역사를 짚어보면, 약 2010년경부터 자바스크립트 프레임워크들의 경쟁과 함께 자바스크립트 웹 개발 추세가 치솟았습니다. 프론트엔드 업계에서 많이 사용되는 프레임워크인 리액트와 뷰만 하더라도 프로젝트 파일의 크기가 꽤 큽니다. 또한 최근에는 백엔드의 로직을 일부 프론트엔드로 옮겨오는 추세인지라 그 복잡도가 더 증가하고 있습니다. 따라서 이런 대규모 소스코드를 브라우저가 그대로 다운받아서 실행할경우, 너무 느리거나 브라우저가 버티지 못하고 다운되는 경우가 발생할 수 있습니다.

 

웹팩을 사용하여 파일들간의 의존성 관계를 정리하고, 코드를 최적화 하여 하나의 자바스크립트 파일(main.js)로 만들어줍니다. 이 파일은 페이지 라우팅이나 세션, 쿠키의 값에 따라 필요한 소스코드만을 다운받아 실행시킵니다. 모든 소스코드를 한번에 실행시키지 않기 때문에 그 규모에 비해 실행 속도가 빠릅니다. 이처럼 웹팩을 사용해서 코드를 하나로 번들링하는 작업을 빌드라고 부릅니다. 그리고 웹팩과 같이 빌드를 하는 도구를 번들러라고 합니다. 번들러는, 효율적 배포와 관련하여 프로젝트 종류에 따라 그리고 프로젝트 사이즈가 크면 클수록 사용이 필수라고 해도 과언이 아닙니다.

 

요약해보자면 자바스크립트 웹개발 열풍과 함께 사용하는 프레임워크에 따라 파일의 규모가커지게 되고 이는 브라우저상에서 속도 저하를 야기합니다. 이 문제를 개선하기 위해 필요한 파일들만 묶어 하나로 만드는 번들링이 필요하고 그 번들링을 하는 작업을 빌드라고 합니다. 그리고 그 빌드 도구를 번들러라고 하는데 webpack은 그 번들러 중 하나입니다. webpack은 파일을 모듈 형식으로 정리해 코드 최적화를 해서 빌드해줍니다.

2. Webpack의 개념

웹팩은 모듈 번들러입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Image 등)을 모듈 단위로 나누어 필요할때마다 조합하여 하나의 결과물로 산출시키는 역할을 합니다. 최신 프론트엔드 프레임워크에서 가장 많이 사용되고 있습니다. 

https://webpack.js.org/

webpack

 

3. Webpack의 필요성

앞서 webpack의 등장배경을 설명하며  webpack의 필요성에 대해 간략하게 설명했습니다. 이제 더 자세하게 webpack의 필요성에 대해 다뤄보겠습니다.

 

1) 파일 단위의 자바스크립트 모듈 관리의 필요성

우선 webpack을 사용해야 하는 이유를 이해하기 위해선 번들러를 사용하기전에는 어떻게 자바스크립트를 사용했는지 알아야 합니다. 자바스크립트는 전역 변수라는 개념을 가지고 있습니다. 이는 변수가 선언된 곳 보다 낮은 스코프 범위를 가지는 함수라면 해당 변수에 접근할 수 있다는 것을 의미합니다.  개별의 파일 자체는 문제없이 작동하겠지만, 복잡한 애플리케이션을 개발할 경우 변수가 서로 겹치게 되는 불상사가  발생할 수 있습니다. 그리고 이러한 스코프 단위에서 발생하는 이슈는 html파일에만 국한되지 않습니다. 리액트에서는 jsx 문법을 사용하고 있고, 뷰에서는 vue파일을 별도로 사용하고 있습니다. 하지만 마지막에 실제로 브라우저가 렌더링하는것은 html 문서입니다. 그렇기 때문에  웹팩은 파일 단위로 코드를 불러오는 방식을 사용해서 이러한 이슈를 해결했습니다. 그리고 이러한 방식을 모듈화라고 합니다.

 

2) 웹 개발 작업 자동화 도구

개발 과정에서 불편함을 겪지 않도록 코드가 변경될때마다 바로 적용되도록 하는 실시간 새로고침은 지금 우리가 사용하는 프레임워크에서는 당연할정도의 기능이지만 과거에는 꽤 혁신적이었습니다. webpack은 이러한 기능 이 외에도 html, css, js 파일 압축, css 전처리 변환, 이미지를 압축시켜 파일 크기를 줄이는 등  브라우저 퍼포먼스를 높히는 여러 작업들을 자동으로 관리해줍니다.

 

3) 웹 어플리케이션의 빠른 로딩 속도와 높은 퍼포먼스

웹팩의 최대 목표는 프로젝트 코드를 최적화시켜 빨리 화면을 보여주는 것입니다. 그렇기 때문에 성능 향상을 위해 웹 페이지를 보여줄 때 모든 코드를 로드하는 것이 아닌 필요한 모듈만 동적으로 로딩해야 했는데, 이전에는 Require.js와 같은 라이브러리를 쓰지 않으면 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능했습니다. webpack은 초기 진입 시 모든 리소스를 한 번에 다운로드하는 SPA의 단점을 보완하기 위해 필요한 리소스를 그때그때 받아오는 원리로 Lazy-loading과 code splitting 기능을 함께 제공합니다. 

 

4. Webpack의 장단점

단점

1. 비교적 복잡한 configuration와 그에 따른 높은 러닝 커브
2. 버전별 종속성이 존재 
3. 개발 모드 속도 (프로젝트가 규묘에 비례.  Webpack 5에 새로 추가된 caching 옵션을 통해 개선)
4. Webpack의 번들 크기

 

장점

webpack의 필요성과 겹치는 내용들이 있으니 개념 정리 느낌으로 참고하세요

 

1. 성능 최적화 & 자동화

• 여러 리소스를 압축하여 최적화하기 때문에 로딩에 대한 네트워크 비용 감소

2. 모듈 단위로 개발

• 가독성과 유지보수성 향상

3. 번들러가 제공하는 편의성 

• CSS가 아닌 Sass나 Stylus 등을 사용할 경우, 또는 TypeScript 사용 시 번들러가 컴파일 과정에서 필요한 플러그인을 추가하고 번들러를 실행

4. Code splitting을 통해 필요할 때만 필요한 스크립트를 로드

• 웹 어플리케이션의 빠른 로딩 속도와 높은 퍼포먼스

 

5. webpack의 Concepts 

5-1. Entry

// webpack.config.js
module.exports = {
  entry: "./src/index.js"
}

dependency graph를 만들기 위해 탐색을 시작하는 지점입니다.

entry 속성에 입력한 파일을 entry point로 설정합니다.

dependency graph를 위해서 entry point를 사용하여 필요에 따라 모듈을 만듭니다. (필요하지 않다면 tree shaking을 통해 번들에 포함시키지 않습니다.)

webpack은 entry point에서 시작하여 애플리케이션에서 필요한 모든 모듈을 포함하는 dependency graph를 재귀적으로 build합니다.

 

5-2. Output

module.exports = {
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
  }
}

번들을 배포할 절대 경로를 정의합니다.

filename : webpack으로 build 한 결과물인 번들 파일의 이름

path : 해당 파일의 경로.  절대 경로 사용. 상대 경로를 지정할 경우 에러가 발생

 

5-3. Loaders

module.exports = {
  module: {
    rules: [
      {
        test: /\\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ]
      },
    ]
  }
}

webpack은 javascript와 JSON 파일만 이해할 수 있습니다.
그래서 application에 필요한 다른 type의 파일을 처리하기 위해서 그에 맞는 Loader가 필요합니다.
Loaders는 javascript에게 none-javascript 모듈을 어떻게 처리하는지 알려줍니다.

 

module 객체 안에는 rules 옵션이 있고 rules는 기본적으로 test와 use 두 가지 옵션이 있습니다.
test: 어떤 파일을 처리할 것인지를 알려주는 역할

use : 어떤 loader를 사용하여 처리할 것인지를 알려주는 역할

loader는 코드를 아래부터 읽기 때문에 위처럼 sass를 사용하는 경우, sass ⇒ css ⇒ js로 변환될 수 있도록 코드를 작성해야 합니다.

module: {
   rules: [
     {
       test: /\\.png$/,
       type: "asset/resource"
     }
   ]
 },

webpakc5에서는 asset/module이 추가되어 rules에 type 옵션으로 사용할 수 있습니다.

asset/module로 처리하는 못하는 파일을 loader로 처리합니다.

esource 파일을 가져와서 수정된 상태를 return 합니다.

 

css나 babel처럼 여러 loader를 사용할 수 있습니다.
js 말고도 다른 모든 파일들은 이러한 기능적 변환에 의해 일부 표현에서 js 모듈로 변환될 수 있습니다.

또한 exclue, include, enforce 등의 속성을 사용해서 모듈을 필터링할 수 있습니다.

 

5-4. Plugins

const HelloWorldPlugin = require('hello-world');
module.exports = {
  // ... configuration settings here ...
  plugins: [new HelloWorldPlugin({ options: true })]
};

plugin은 함수를 적용하고 전체 컴파일 수명 주기에 연결할 수 있는 ES5 클래스입니다.
웹팩의 기본적인 동작에 추가 기능을 제공합니다.

loader와 비교하면 loader는 파일을 해석하고 변환하는 과정에 관여하고, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 합니다.
plugin을 사용하면 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입 등과 같은 광범위한 작업을 수행할 수 있습니다.
plugins 배열 안에 new 생성자로 실행하는 방식으로 사용됩니다.

 

 

5-5. Mode

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

mode는 환경 별로 webpack을 build 할 수 있도록 해줍니다.
development, production, none 값을 사용할 수 있습니다.

 

5-6. Browser Compatibility

Webpack는 ES5 호환 브라우저를 모두 지원합니다 (IE8 및 그 이하 버전은 지원되지 않습니다).

Webpack은 import()와 require.ensure()에 Promise가 필요합니다.

더 오래된 브라우저를 지원하려면 이러한 표현을 사용하기 전에 polyfill을 로드해야 합니다.

 

공식문서 바로가기

 

 

 

 

---

참고 문서

https://codermun-log.tistory.com/605

https://www.hanl.tech/blog/webpack-%ec%82%ac%ec%9a%a9%eb%b0%a9%eb%b2%95%ea%b3%bc-%ea%b8%b0%eb%8a%a5-%ec%9a%94%ec%a0%90-%ec%a0%95%eb%a6%ac/

https://demain18-blog.tistory.com/72

https://medium.com/atant/what-is-webpack-252513b3c1ad