WebPack 설치 및 설정하기

안녕하세요 :)

 

2024.12.11 - [JavaScript] - WebPack이란 무엇인가? 기본 파헤치기

이전에, 'WebPack이란 무엇인가? 기본 파헤치기' 글에서 WebPack이란 무엇인가에 대해서 다뤄보았습니다. 이번 글에서는 WebPack을 설치하고 설정을 어떻게 해야 하는지에 대해 알아보려고 합니다!

출처: https://www.ma-no.org/en/programming/what-is-webpack-and-how-does-it-work

 

먼저, WebPack을 프로젝트 폴더에 설치해야 합니다. WebPack을 설치하기 전에, Node.js를 설치해줘야 합니다.

 

Node.js 설치 방법

왜 Node.js가 필요할까요?

WebPack은 기본적으로 Node.js 환경에서 동작하는 도구이기 때문입니다. Node.js는 JS를 서버 사이드에서 실행할 수 있게 해주는 런타임으로, WebPack을 비롯한 많은 개발 도구들이 Node.js를 기반으로 만들어졌습니다. 그렇기 때문에, WebPack을 사용하기 전에 Node.js를 설치해줘야 합니다. Node.js는 npm이라는 패키지 매니저도 포함하고 있어서, npm을 통해 WebPack과 관련된 패키지들을 쉽게 관리할 수 있습니다.

출처: https://intuji.com/nodejs-the-definitive-guide/

 

Node.js 설치 방법

1. Node.js 공식 웹 사이트 방문
   • Node.js 공식 사이트에 접속합니다. 
   • https://nodejs.org/en
2. LTS(Long Term Support) 버전 다운로드
   • 안정적인 버전을 사용하기 위해 LTS 버전을 다운로드 받는 것이 좋습니다. 다운로드 받는 화면에서 LTS를 클릭하고 다운로드 받아주세요.
   • 왜 LTS 버전을 다운로드 받는 게 좋을까요?
     • LTS 버전은 Node.js의 안정성과 장기적인 지원을 보장받는 버전입니다. WebPack을 포함한 대부분의 개발 도구와 라이브러리는 LTS 버전을 기준으로 테스트되고 호환성을 유지하기 때문에, LTS 버전을 사용하는 것이 권장됩니다.
3. 설치 프로그램 실행하기
   • 다운로드한 설치 파일을 실행하고, 화면의 지시에 따라 설치를 완료해주시면 됩니다.
4. 설치 확인
   • 설치가 끝났다면, 터미널이나 cmd를 열어서 Node.js와 npm이 제대로 설치 되었는지 확인해보면 됩니다.
     • node -v: node.js 설치 확인 명령어
     • npm -v: npm 설치 확인 명령어
   • 각각의 명령어를 입력하면 Node.js와 npm의 버전이 출력됩니다. 버전 번호가 보이면 정상적으로 설치된 거에요!

 

프로젝트 초기화 하기

WebPack을 설정하기 전에, 프로젝트를 초기화해야 합니다. 프로젝트 디렉토리를 생성하고, package.json 파일을 생성하는 과정을 거치도록 합니다.

 

1. 프로젝트 디렉토리 생성하기

mkdir <원하는 디렉토리 이름>
cd <생성한 디렉토리 이름>

 

2. npm 초기화하기

npm init -y

• 프로젝트를 초기화하여 package.json 파일을 생성합니다. -y 옵션을 사용하면 기본 설정을 빠르게 초기화할 수 있습니다.
• npm init -y 명령어를 통해 package.json 파일이 생성되면, 프로젝트의 기본 설정이 완성된 겁니다.

 

3. package.json 확인하기

• 생성된 package.json 파일입니다.
• 만약, 백지 상태가 아닌 다른 의존성이 추가되어 있다면 예시와 다르게 나올 겁니다.

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

자, 여기서 npm을 초기화 하는데, 왜 npm을 초기화해야 할까요?

npm을 초기화하면 프로젝트의 핵심 정보를 담고 있는 package.json 파일이 생성됩니다. 이 파일은 프로젝트의 이름, 버전, 의존성 패키지, 스크립트 등을 관리하는 역할을 하는데요, 이 파일을 통해서 패키지를 쉽게 설치하고 업데이트할 수 있으며, 일관된 개발 환경을 유지할 수 있습니다.

 

또한, package.json 파일을 사용하면 프로젝트를 배포하거나 다른 개발자들에게 공유할 때 필수적인 정보를 제공할 수 있습니다. 간단히 말해, npm init은 프로젝트를 체계적으로 관리하고 효율적으로 개발하기 위한 첫걸음이라고도 할 수 있는 것이죠.

 

WebPack과 필요한 패키지 설치하기

이제 WebPack과 WebPack CLI(Command Line Interface)를 설치할 차례입니다. 추가로, Babel, CSS, HTML 처리를 위한 로더와 플러그인도 함께 설치할 겁니다.

 

1. WebPack 및 WebPack CLI 설치하기

먼저, WebPack과 WebPack CLI를 개발 의존성(devDependencies)으로 설치합니다.

npm install --save-dev webpack webpack-cli

 

WebPack CLI 설치?

WebPack CLI는 WebPack을 명령줄에서 쉽게 사용할 수 있게 해주는 도구입니다. WebPack CLI를 설치함으로써, 터미널에서 다양한 WebPack 명령어를 실행하여 프로젝트를 빌드하거나 개발 서버를 시작할 수 있습니다. 또한, WebPack 설정 파일(webpack.config.js)과의 원활한 통합을 지원하기 때문에 다양한 빌드 옵션을 손쉽게 적용할 수 있게 도와줍니다.

출처: https://github.com/webpack/webpack-cli/issues/436

 

2. 필수 로더 및 플러그인 설치

프로젝트에서 JavaScript, CSS, 이미지를 처리하기 위해 필요한 로더와 플러그인을 설치합니다.

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev css-loader style-loader
npm install --save-dev html-webpack-plugin

• babel-loader: 최신 JS와 JSX 코드를 브라우저 호환 가능한 형태로 변환해줍니다.
• css-loader & style-loader: CSS 파일을 JS 모듈로 변환하고, 이를 스타일 태그로 삽입해줍니다.
• html-webpack-plugin: HTML 파일을 자동으로 생성하고, 번들된 스크립트를 포함시켜줍니다.

이건 어디까지나 예시이며, 이 외에도 프로젝트의 요구에 따라서 추가적인 로더와 플러그인을 설치할 수 있습니다. 예를 들어, 이미지 최적화를 위한 image-webpack-loader를 설치하거나, CSS를 별도의 파일로 추출하기 위한 mini-css-extract-plugin 등을 설치할 수 있습니다.

 

 

이렇게 해서 WebPack과 필요한 패키지를 설치하고, 기본적인 설정을 마쳤습니다. 다음 단계에서는 WebPack 설정 파일인 webpack.config.js를 작성하여 실제로 어떻게 WebPac이 프로젝트를 빌드하는지 살펴보겠습니다.

 

기본 webpack.config.js 설정하기

WebPack을 설치하고 필요한 패키지를 모두 설치했다면, 이제 WebPack 설정 파일을 만들어야 합니다. 설정 파일을 통해 WebPack이 프로젝트를 어떻게 빌드할지 정의할 수 있습니다.

 

1. webpack.config.js 파일 생성하기

프로젝트 루트 디렉토리에 webpack.config.js 파일을 생성해줍니다.

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 엔트리 포인트 설정
  entry: './src/index.js',

  // 출력 설정
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // 빌드 시 이전 파일 정리
  },

  // 모듈 설정
  module: {
    rules: [
      {
        test: /\.jsx?$/, // .js 또는 .jsx 파일에 적용
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/, // .css 파일에 적용
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/, // 이미지 파일에 적용
        type: 'asset/resource',
      },
    ],
  },

  // 플러그인 설정
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 템플릿 HTML 파일
    }),
  ],

  // 확장자 자동 인식
  resolve: {
    extensions: ['.js', '.jsx'],
  },

  // 모드 설정
  mode: 'development', // 'production'으로 변경 가능
};

 

설정한 파일을 설명해보자면,

• entry: WebPack이 번들링을 시작할 파일을 지정합니다. 보통 src/index.js가 엔트리 포인트로 설정됩니다.
• output: 번들된 파일의 이름(여기서는 bundle.js) 과 저장 위치를 설치합니다. bundle.js파일을 dist 폴더에 저장하고, 빌드 시 기존 파일을 정리합니다.
• module.rules: 각 파일 형식에 맞는 로더를 설정합니다.
  • .js 또는 .jsx 파일은 babel-loader를 사용해 Babel로 변환합니다.
  • .css 파일은 css-loader와 style-loader를 사용해 처리합니다.
  • 이미지 파일은 asset/resource 타입으로 처리해 별도의 파일로 출력합니다.
• plugins: WebPack의 기능을 확장하는 플러그인을 설정합니다. 여기서는 HtmlWebpackPlugin을 사용해 HTML 파일을 자동으로 생성합니다.
  • 어떤 HTML 파일을 자동으로 생성할까요?이는 온전히 새로운 HTML 파일을 생성하는 것과는 다릅니다. 결론 먼저 말하자면, HtmlWebpackPlugin은 프로젝트의 템플릿 HTML 파일을 기반으로 최종 HTML 파일을 생성하고, 번들된 JS 파일을 자동으로 삽입하여 번들링된 애플리케이션을 쉽게 배포할 수 있게 도와줍니다. 이를 통해, 개발자는 번들 관리와 HTML 파일 관리를 한꺼번에 할 수 있고, 번들링 과정에서 발생할 수 있는 오류를 줄일 수 있죠.
• resolve.extensions: 파일 확장자를 자동으로 인식할 수 있도록 설정합니다.
• mode: 이 옵션을 빌드 모드를 설정하는 옵션입니다. 개발 중에는 development, 배포 시에는 production으로 변경합니다.

 

기본적으로 이렇게 webpack.config.js 파일을 설정해주면, 

WebPack은 지정된 엔트리 포인트(src/index.js)를 기준으로 프로젝트 내의 모든 모듈과 의존성을 분석하게 됩니다. 설정된 로더(babel-loader, css-loader, style-loader 등)를 통해 각 파일 형식에 맞게 변환하고, 플러그인(HtmlWebpackPlugin)을 사용하여 최종 번들에 필요한 HTML 파일을 자동으로 생성합니다. 또한, resolve.extension 설정을 통해 파일 확장자를 자동으로 인식하고, mode 옵션을 통해 개발과 프로덕션 환경에 맞는 최적화된 빌드를 수행하게 됩니다.

 

프로젝트 구조 만들기

WebPack 설정을 완료했으니, 이제 프로젝트의 폴더 구조를 만들어보겠습니다. 기본적인 React 프로젝트 구조를 예로 들어 설명해보겠습니다. 귀찮으니까 GPT야 해줘~

From GPT

 

Babel 설정 파일 작성하기(.babelrc)

이제 Babel을 사용해서 최신 JavaScript와 JSX 코드를 변환하기 위해 설정 파일을 작성해야 합니다.

출처: https://www.npmjs.com/package/babel-plugin-inferno

그 전에, Babel이 무엇인지 알고 계신가요?

바벨(Babel)은 최신 JavaScript(ES6+)와 JSX 코드를 브라우저가 이해할 수 있는 호환 가능한 형태로 변환해주는 일종의 도구입니다. 바벨을 통해 최신 문법을 사용하면서도, 구형 브라우저에서도 애플리케이션이 제대로 동작할 수 있도록 할 수 있습니다. 

 

그럼 이제 바벨 파일을 만들어볼까요?

1. .babelrc 파일 생성하기

프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고, 아래와 같이 작성해봅시다.

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

 

설정 파일은

• @babel/preset-env: 최신 자바스크립트 기능을 구형 브라우저에서도 호환 가능하도록 변환해줍니다. 예를 들어, let과 const를 var로 변환해주거나, 화살표 함수를 일반 함수로 변환해주는 동작을 시행합니다.
• @babel/preset-react: JSX 문법을 일반 JavaScript로 변환해줍니다. JSX는 HTML과 유사한 문법을 JavaScript 내에서도 사용할 수 있게 해주지만, 브라우저는 이를 이해하지 못하기 때문에 Babel을 통한 변환이 필요합니다.

 

보충 설명을 조금 해보자면,

보통 React를 사용하는 프로젝트에서는 JSX 문법을 자주 사용합니다. Babel을 통해 JSX를 브라우저가 이해할 수 있는 JavaScript로 변환할 수 있죠. 

하지만 이는 어디까지나 JSX 문법을 사용할 때 이야기입니다. TypeScript를 사용하는 TSX 문법이라면 이야기가 조금 달라집니다. TyperScript는 자체적으로 최신 JavaScript(ES6+) 문법을 지원하기 때문에, 필요한 경우 TypeScript의 컴파일러(tsc)는 트랜스파일링(Transpiling)을 통해 구형 JavaScriptf로 변환할 수 있기 때문에 별도의 Babel 설정이 필요하지 않을 수 있습니다.

 

React 컴포넌트 작성하기

이제 설정이 어느정도 되었으니, 폴더 구조에 맞춰서 컴포넌트를 만들어보죠. 이것도 GPT야 해줘

 

1. src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './styles/main.css';

ReactDOM.render(<App />, document.getElementById('root'));

 

2. src/components/App.jsx

import React from 'react';
import Header from './Header';
import Footer from './Footer';
import logo from '../images/logo.png';

const App = () => (
  <div>
    <Header />
    <img src={logo} alt="Logo" />
    <Footer />
  </div>
);

export default App;

 

3. src/components/Header.jsx

import React from 'react';

const Header = () => (
  <header>
    <h1>Welcome to My React App</h1>
  </header>
);

export default Header;

 

4. src/components/Footer.jsx

import React from 'react';

const Footer = () => (
  <footer>
    <p>&copy; 2024 My React App</p>
  </footer>
);

export default Footer;

 

 

HTML 템플릿 작성하기( public/index.html )

Webpack 설정 파일인 webpack.config.js에서 HtmlWebpackPlugin을 사용하여 HTML 파일을 자동으로 생성한다고 했는데, 구체적으로 어떤 HTML파일을 생성하는지 조금 더 자세히 말씀드리겠습니다.

 

어떤 HTML 파일을 자동으로 생성하나요?

HtmlWebpackPlugin은 프로젝트의 템플릿 HTML 파일을 기반으로 최종 HTML 파일을 생성합니다. 이는 새로운 HTML 파일을 온전히 만드는 것 대신, 이미 존재하는 템플릿 파일을 사용하여 필요한 부분만 자동으로 업데이트하고, 번들된 JavaScript 파일을 자동으로 삽입해줍니다. 

 

HTML 템플릿 파일 작성하기

먼저, public 폴더 내에 템플릿 HTML 파일을 작성해야 합니다. 이 파일은 Webpack이 번들링된 스크립트를 자동으로 삽입할 기반이 됩니다.

 

프로젝트 루트 디렉토리에 public 폴더를 만들고, 그 안에 index.html 파일을 생성합니다. 아래는 기본적인 예시 코드입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

 

 

설명해보자면,

• <div id="root"></div>
  • React 애플리케이션이 렌더링될 DOM 요소입니다.
• <!-- Webpack이 자동으로 번들 스크립트를 삽입 -->
  • HtmlWebpackPlugin이 번들된 JavaScript 파일을 이 위치에 자동으로 삽입합니다. 별도의 <script> 태그를 수동으로 추가할 필요가 없습니다.

 

이제 아까 설정해둔 webpack.config.js 파일에서 템플릿을 지정해줘야 하는데요. 이미 위에서 하긴 했지만 한 번 더 보고 넘어가겠습니다.

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 템플릿 HTML 파일 경로
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  mode: 'development',
};

 

코드를 보면,

• template: './public/index.html'
  • HtmlWebpackPlugin이 사용할 템플릿 파일의 경로를 지정합니다. 이 경로에 있는 html파일을 기반으로 최종 HTML 파일을 생성하게 됩니다.
• 번들링이 완료되면, Webpack은 dist 폴더 내에 index.html 파일을 생성하고, 그 안에 <script src =  'bundle.js'></script> 태그를 자동으로 추가합니다.

 

WebPack 빌드하기

이제 프로젝트를 빌드하여 최종 HTML 파일과 번들된 JavaScript 파일을 생성하면 됩니다..! WebPack을 활용하면 개발 및 배포 환경 모두에서 애플리케이션을 관리할 수 있습니다. 

 

1. 개발 서버 실행하기

개발 중에는 WebPack Dev Server를 사용하여 실시간으로 변경 사항을 확인할 수 있습니다. 이를 통해 코드 수정 시마다 번들을 다시 빌드하고 브라우저를 자동으로 새로고침할 수 있습니다.

npm start

• 이 명령어를 실행하면 WebPack Dev Server가 시작되고, 브라우저가 자동으로 열리게 됩니다. 개발 중인 애플리케이션을 실시간으로 확인할 수 있게 되는 것이죠.
• 여기서 바로 HMR이 지원되는데요, 페이지를 새로고침하지 않고도 변경된 모듈만 교체하여 개발 속도 향상을 지원받을 수 있습니다. 코드 수정 후 바로 결과를 확인할 수 있어 개발 속도가 빨라지죠.

 

2. 프로덕션 빌드 생성하기

프로덕션 환경에 배포하려면 최적화된 빌드를 생성해야 합니다. 프로덕션 빌드는 코드 압축, 트리 쉐이킹(Tree Shaking), 캐싱 최적화 등 다양한 최적화 과정을 거쳐 애플리케이션의 성능을 극대화합니다.

npm run build

• 이 명령어를 실행하면 다음과 같은 작업이 일어나게 됩니다.
  • 코드 압축 및 난독화 : JS 파일을 압축하여 파일 크기를 줄이고, 난독화를 통해 코드의 가독성을 낮춥니다.
  • Tree Shaking : 사용되지 않는 코드를 제거하여 번들 크기를 줄입니다.
  • 캐싱 최적화 : 파일 이름에 해시를 추가하여 캐싱 효율을 높이고, 변경된 파일만 다시 로드되도록 합니다.
  • CSS 및 리소스 최적화 : CSS 파일을 별도로 추출하고, 이미지와 같은 리소스를 최적화하여 로딩 속도를 높여줍니다.

 

3. 최종 Html 파일 확인하기

빌드가 완료되면 dist 폴더에 최적화된 번들 파일과 최종 HTML 파일이 생성됩니다. 생성된 파일구조는 다음과 같습니다.

from GPT

 

빌드 파일 열기

• dist 폴더 내의 index.html 파일을 브라우저에서 열어보면 됩니다.
• 최적화된 번들 파일(bundle.js)이 자동으로 삽입된 상태로 확인할 수 있습니다.
• 프로덕션 빌드는 코드가 최적화되어 있으므로, 개발 서버에서 실행하는 것보다 더 빠르게 로드됩니다. 브라우저 내 개발자 도구를 열어 네트워크 탭에서 로딩 속도와 번들 크기를 비교해보면 시각적으로 알 수 있습니다.

이제 이렇게 빌드된 파일을 배포하기만 하면 됩니다!

 

끝내는 말

지금까지 WebPack을 사용하여 React 애플리케이션을 설정하고, Babel을 통해 최신 JavaScript와 JSX코드를 변환하며, 개발 및 프로덕션 빌드를 생성하는 과정을 함께 살펴보았습니다. 이 과정을 통해 WebPack의 기본적인 사용법과 설정 방법을 익히고, 개발 환경을 구축하실 수 있었으면 좋겠습니다.

 

읽어주셔서 감사합니다 :)