Webpack이란

Webpack이란?

자바스크립트 어플리케이션을 위한 정적 모듈 번들러 이다.

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
Webpack Concepts

html에 들어가는 다수의 js 파일들을 하나의 js 파일로 만들어 주는 것을 의미한다.

js 파일 뿐만 아니라 css, image, html 등을 모듈로 로드해서 사용할 수 있고
코드를 압축하는 기능을 제공하며 번들링 된 파일이 너무 무거워질 경우, 다시 여러 개의 파일로 코드 스플리팅(Code Spliting) 할 수 있다.

여기서 말하는 모듈(module)이란?

관련된 데이터와 함수들이 묶여 module을 형성하고 주로 파일 단위로 관리된다.
 모달은 isShow라는 상태와 show, close 함수를 가진 하나의 모듈이라고 할 수 있다.

모듈들은 각각의 javascript 파일에서 관리된다.

여기서 말하는 번들러(bundler)란?

모듈별로 나누어진 파일을 연관되어 있는 단위로 묶어 하나의 파일로 만들어주는 역할을 한다. (모듈 또는 외부 라이브러리 간의 의존성을 쉽게 관리할 수 있다.)
🧐 alert, confirm, propmt라는 모듈이 있을 때, 이들을 대화상자라는 하나의 번들로 묶을 수 있다. alert이 a 라이브러리를 사용하고 있다면 a 라이브러리도 함께 번들링 된다.

웹 페이지에서 모듈을 사용하려면 해당 모듈과 모듈에서 사용하는 라이브러리를 로드해야 하는데 선후 관계를 따져 순서대로 로드해야 한다.
모듈의 수가 얼마 되지 않는다면 간단하게 로드할 수 있지만 수가 많아지면 매우 복잡해진다.
또한 이렇게 많은 양의 파일을 로드한다면 네트워크 병목현상이 발생할 수 있다.
하나의 자바스크립트 파일 안에 많은 양을 작성하면 해결할 수 있지만 이럴 경우 가독성도 떨어지고 유지보수도 힘들어진다.
이때, 번들링 된 파일을 로드하면 문제를 해결할 수 있다.
모듈을 번들링 하는 과정 중, 모듈이나 외부 라이브러리의 의존성들을 로드하기 때문에 선후 관계를 따질 필요가 없으며, 여러 파일로 작성된 모듈들을 연관된 특정 단위로 묶어서 하나의 파일로 만들기 때문에 병목현상도 예방할 수 있다.

웹팩은 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 생성한다.

주요 개념

// webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

• Entry
  엔트리 포인트는 웹팩이 내부의 디펜던시 그래프를 생성하기 위해 사용하는 모듈이다.
  즉, 엔트리 포인트는 웹팩이 번들링을 시작할 메인 파일이다.엔트리 포인트는 꼭 하나가 아니라 여러 엔트리 포인트를 지정할 수 있는데 이때 이름(name)과 콘텐츠 해시(contentHash) 가진 여러 개의 번들로 만들 수 있다.
• // webpack.config.js module.exports = { entry: './path/to/my/entry/file.js', };
• 값으로 입력된 파일의 의존성을 찾아 나머지 파일을 알아낸다.
• Output
  output 속성은 생성된 번들을 내보낼 위치와 파일의 이름을 지정하는 역할을 한다. publicPath 옵션
  다른 도메인이나 CDN에서 일부 또는 모든 출력 파일을 호스팅 하려는 경우 사용할 수 있으며 Webpack Dev Server에서는 출력 파일의 URL 경로로 사용된다.
• // webpack.config.js module.exports = { output: { path: path.resolve(__dirname, 'dist'), // 내보낼 위치 filename: 'my-first-webpack.bundle.js', // 생성된 번들 파일 이름 }, };
• Loaders
  웹팩은 자바스크립트와 JSON 파일만 이해한다. 만약 JSX 같은 코드를 이해하기 원한다면 로더를 사용하여 해당 코드들을 웹팩이 이해할 수 있도록 변환할 로더를 옵션으로 설정하고 그것들을 디펜던시 그래프에 추가할 수있는 유효한 모듈로 변환한다.
  • test: 변환이 필요한 파일들을 식별한다.
  • use: 변환을 수행하는 데 사용되는 로더를 가리킨다.
    babel-loader를 사용하면 최신 문법으로 작성된 Javascript를 모든 브라우저에서 해석할 수 있도록 변환할 수 있다.
• // webpack.config.js module.exports = { module: { rules: [{ test: /\.?js$/, use: 'babel-loader' }], }, };
• Plugins
  로더는 특정 유형의 모듈(JSX 파일 같은)을 변환하는 데 사용하지만 플러그인은 번들을 최적화하거나 asset을 관리하고 환경 변수 주입 등과 같은 작업을 수행한다.
  Webpack 패키지에 포함된 내장 플러그인 외에 추가로 필요한 기능은 외부 플러그인을 받아서 사용할 수 있다.HtmlWebpackPlugin은 HTML 파일을 생성하고 자동으로 생성된 모든 번들을 삽입한다.
• // webpack.config.js module.exports = { plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], };
• Mode
  웹팩에 내장된 환경별 최적화를 활성화할 수 있다.
  모드 옵션의 값으로 development production none을 선택할 수 있다.

Webpack이 필요한 이유

페이지마다 새로운 HTML을 요청해 뿌려주는 방식이었던 예전에는 괜찮았지만
SPA 즉, 하나의 HTML 페이지에서 여러 개의 js 파일을 포함하게 되면서 파일을 컴파일 할 때 다수의 js 파일을 불러오는데 시간이 오래 걸리게 된다.

그러한 부분을 해결하기 위해서 하나의 js 파일로 번들링 해주는 것이 필요하다. 생성된 번들 파일은 번들 파일의 용량을 최대한 줄이거나 분할하는 등 최적화되어야 하고 모든 브라우저에서 작동해야 한다.

 

 

출처 : https://velog.io/@suyeon9456/Webpack

 

 

 

---

위 출처블로그와 그안에 참고된 블로그들을 보면 자세히 알수가 있습니다. 최초 출시일: 2012년 3월 10일 Webpack4 버전은 (2018년)  Webpack5 릴리즈판이 2020년 10월 10일 공개 다만 현재 Webpack 팀이 Vercel 에 합류하면서 Rust 기반으로 새롭게 다지고 있는 Turbopack 을 개발하고 있습니다. 현재 Vercel 의 주력 프레임워크인 Next.js 에서 도입 중이며, 현재 베타 단계입니다.