Webpack 에 대한 소개

webpack(웹팩) 소개

 

webpack은 현대 자바스크립트 응용 프로그램을 위한 module bundler입니다. module bundler란 웹 애플리케이션을 구성하는 리소스(HTML, CSS, Javscript, …)를 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 개발자가 응용프로그램의 종속성을 관리하고 최적화할 수 있도록 지원하므로 관리성과 효율성이 향상됩니다. 이번 포스팅에서는 webpack의 기능, 이점 및 다른 빌드 도구와 어떻게 다른지를 포함한 webpack의 기본 사항을 살펴보겠습니다.

 

webpack 프로젝트 설정하기

 

webpack을 시작하는 것은 쉽지만, 시작하기 전에 시스템에 Node.js 및 npm(Node Package Manager)이 설치되어 있는지 확인해야 합니다. 여기까지 완료되면 프로젝트를 위한 디렉토리를 하나 생성합니다. 그곳에서 npm init 명령을 통해 package.json 파일을 생성할 수 있습니다. 이 파일은 프로젝트에서 사용할 모든 종속성 및 스크립트를 추적합니다.

오히려 설명이 어렵네요. cli 명령어 스크립트를 살펴봅시다.

 

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

webpack-demo
  |- package.json
  |- package-lock.json
 |- index.html
 |- /src
   |- index.js

 

npm init -y 를 수행한 디렉터리 구조는 위와 같습니다. 자동으로 package.json 파일이 생성되는 것을 볼 수 있어요. 여기까지는 webpack의 영역이 아닌 기본 npm 영역인 것을 기존 node.js 사용자 분들은 아실 거라 생각해요.

 

그런 다음 webpack 구성 파일을 만들어야 합니다. 'webpack.config.js'라는 이름의 이 파일은 응용 프로그램의 진입점과 출력점뿐만 아니라 사용할 로더와 플러그인을 지정하는 곳입니다.

 

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

 

이 구성은 webpack 에 './src/index.js' 파일에서 시작하여 dist 디렉토리에 'bundle.js'라는 이름의 번들을 생성하도록 지시합니다.

 

 

아래 명령어를 통해 빌드를 해보세요. 그러면 webpack.config.js 파일로 부터 설정을 불러올 수 있습니다. config 파일은 CLI 사용보다 훨씬 더 많은 유연성을 허용합니다. 이러한 방식으로 로더 규칙, 플러그인, 해결 옵션 및 기타 여러 개선 사항을 지정할 수 있습니다.

 

npx webpack --config webpack.config.js

 

Webpack loaders and plugins

 

webpack의 가장 강력한 기능 중 하나는 로더(loader)를 사용하여 자바스크립트와 CSS와 같은 다른 유형의 파일을 변환하여 응용 프로그램에서 사용할 수 있도록 하는 기능입니다. 로더는 webpack 구성 파일에 지정되며, 하나의 파일에서 여러 변환을 수행하기 위해 함께 연결될 수 있습니다.

 

 

예를 들어, babel-loader를 사용하여 JavaScript 코드를 이전 버전의 JavaScript로 변환하여 이전 브라우저에서 실행할 수 있습니다.

 

module: {
    rules: [
      {
        test: /\\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

 

loader 외에도 webpack은 HTML 파일 생성이나 빌드 디렉터리 정리와 같은 추가 작업을 수행하는 데 사용할 수 있는 풍부한 플러그인 생태계를 가지고 있습니다. 인기 있는 플러그인으로는 'html-webpack-plugin' 랑 'clean-webpack-plugin'가 있습니다.

 

Optimizing webpack builds

 

webpack의 가장 중요한 측면 중 하나는 빌드를 최적화하는 기능입니다. 여기에는 코드 분할, 트리 흔들기, 코드 축소 등의 기술이 포함된다. 코드 분할을 사용하면 요청 시 로드할 수 있는 더 작은 청크로 코드를 분할하여 응용 프로그램의 로드 시간을 개선할 수 있습니다. 트리 쉐이킹은 웹팩이 데드 코드를 식별하고 제거할 수 있도록 해 최종 번들의 크기를 줄이는 기술이다. 코드 축소는 최종 번들의 크기를 줄여 로드 속도를 높이는 데 도움이 됩니다.

 

 

Webpack은 또한 최종 번들의 크기에 제한을 설정할 수 있는 성능 예산 기능을 제공합니다. 이 기능은 느린 장치 또는 느린 네트워크 연결에서 응용 프로그램의 성능을 유지하는 데 유용합니다. 또한 webpack에는 빌드 통계를 분석하기 위한 도구가 내장되어 있어 최적화가 필요한 응용 프로그램 영역을 식별하는 데 도움이 됩니다.

 

Advanced webpack topics

 

웹팩은 리액트 및 기타 자바스크립트 프레임워크, 타입스크립트, 프로그레시브 웹앱(PWA), 일렉트로닉스를 포함한 다양한 기술과 함께 사용할 수 있는 다목적 도구입니다. 예를 들어, webpack은 babel-loader 및 @babel/preset-react 사전 설정을 사용하여 React와 함께 작동하도록 구성할 수 있습니다. 이를 통해 응용 프로그램에서 JSX 구문 및 React 특정 기능을 사용할 수 있습니다.

 

 

마찬가지로 웹팩은 ts-loader와 @babel/preset-type 스크립트 사전 설정을 사용하여 TypeScript와 함께 작동하도록 구성할 수 있다. 이를 통해 응용 프로그램에서 TypeScript의 유형 검사 및 기타 기능을 사용할 수 있습니다.

 

 

webpack을 PWA와 함께 사용하면 응용 프로그램의 성능과 오프라인 기능을 크게 향상시킬 수 있습니다. 자산을 캐시하고 응용프로그램에 대한 오프라인 액세스를 제공할 수 있는 서비스 작업자를 생성하도록 webpack을 구성할 수 있습니다.

 

 

마지막으로, 웹팩은 또한 Electron을 사용하여 데스크톱 애플리케이션을 구축하는 데 사용될 수 있습니다. 이렇게 하면 웹 및 데스크톱 응용프로그램에 모두 동일한 코드베이스를 사용할 수 있으므로 코드 중복을 줄이고 응용프로그램을 더 쉽게 유지관리할 수 있습니다.

 

결론

 

웹팩은 최신 자바스크립트 애플리케이션을 구축하고 최적화하는 데 도움을 줄 수 있는 강력한 모듈 번들러입니다. 이를 통해 응용프로그램의 종속성을 관리하고 최적화할 수 있을 뿐만 아니라 로더와 플러그인을 사용하여 다양한 변환 및 작업을 수행할 수 있습니다. 또한 웹팩에는 코드 분할, 트리 흔들기, 코드 최소화와 같은 빌드 최적화를 위한 도구가 내장되어 있습니다.

 

 

웹팩은 리액트, 타입스크립트, PWA, 일렉트로닉스 등 다양한 기술과 함께 사용할 수 있습니다. 웹 팩의 기본 사항과 기능을 이해하면 응용 프로그램의 성능과 유지 관리성을 향상할 수 있습니다.

 

 

웹팩에 대해 자세히 알아보려면 공식 웹 팩 설명서와 다른 온라인 리소스 및 자습서를 확인하십시오.

 

 

참고 리소스

https://webpack.js.org/guides/getting-started/

https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#웹팩이란