Colin's Blog
[javascript] Webpack을 이용한 멀티 페이지 애플리케이션 구현하기

소개

이번 글에서는 Webpack을 사용하여 멀티 페이지 애플리케이션을 구현하는 방법에 대해 살펴보겠습니다. 멀티 페이지 애플리케이션이란, 여러 개의 페이지로 구성된 애플리케이션을 말합니다. 각 페이지는 독립적인 HTML, CSS, JavaScript 파일을 가지며, 서로 다른 기능을 수행합니다. 이러한 구조를 갖는 애플리케이션은 일반적으로 CMS(Content Management System)이나 e-commerce 플랫폼에서 많이 사용됩니다.

이 글에서는 Webpack을 사용하여 멀티 페이지 애플리케이션의 빌드 과정을 자동화하고, 각 페이지의 의존성을 관리하는 방법에 대해 알아보겠습니다.

준비물

이 글을 따라하기 위해서는 다음과 같은 소프트웨어와 패키지가 필요합니다.

프로젝트 구조

먼저 프로젝트의 디렉토리 구조를 생성해보겠습니다.

my-app/
  |- src/
  |   |- index.html
  |   |- about.html
  |   |- contact.html
  |   |- index.js
  |   |- about.js
  |   |- contact.js
  |- dist/
  |- webpack.config.js
  |- package.json

위 구조에서 src 디렉토리는 각각의 페이지에 대한 HTML 파일과 JavaScript 파일을 포함합니다. dist 디렉토리는 Webpack으로 빌드한 결과물을 담습니다. webpack.config.js는 Webpack의 설정 파일이며, package.json은 프로젝트의 의존성을 관리합니다.

Webpack 설정

이제 Webpack의 설정 파일인 webpack.config.js을 작성해보겠습니다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

위 설정 파일에서 entry는 각 페이지의 JavaScript 파일을 지정하고, output은 Webpack으로 빌드한 파일의 경로와 이름을 설정합니다. 이 설정을 통해 각 페이지별로 별도의 JavaScript 파일을 생성할 수 있습니다.

HTML 파일 생성

이제 HTML 파일을 생성하고, 해당 파일에서 생성한 JavaScript 파일을 로드하도록 수정해보겠습니다. 각 HTML 파일에는 다음과 같은 코드를 추가합니다.

<!-- index.html -->
<html>
<head>
  <title>My App - Home</title>
</head>
<body>
  <h1>Welcome to My App!</h1>
  <script src="index.bundle.js"></script>
</body>
</html>

<!-- about.html -->
<html>
<head>
  <title>My App - About</title>
</head>
<body>
  <h1>About Us</h1>
  <script src="about.bundle.js"></script>
</body>
</html>

<!-- contact.html -->
<html>
<head>
  <title>My App - Contact</title>
</head>
<body>
  <h1>Contact Us</h1>
  <script src="contact.bundle.js"></script>
</body>
</html>

위 코드에서 JavaScript 파일의 경로는 Webpack 설정 파일에 따라 자동으로 생성됩니다. 이를 통해 각 페이지별로 해당 페이지에 필요한 JavaScript 파일을 로드할 수 있습니다.

빌드하기

이제 Webpack을 사용하여 프로젝트를 빌드해보겠습니다. 터미널을 열고 다음 명령을 실행합니다.

npx webpack --config webpack.config.js

이 명령을 실행하면 Webpack은 설정 파일에 따라 코드를 번들링하여 dist 디렉토리에 결과물을 생성합니다.

실행하기

빌드가 완료되면 각 HTML 파일을 웹 브라우저로 실행해보세요. 각 페이지는 독립적으로 동작하며, 해당 페이지에 필요한 JavaScript 파일을 로드하여 기능을 수행합니다.

결론

이번 글에서는 Webpack을 사용하여 멀티 페이지 애플리케이션을 구현하는 방법에 대해 알아보았습니다. Webpack을 활용하면 각 페이지별로 독립적인 JavaScript 파일을 생성하고 관리할 수 있으며, 빌드 과정을 자동화할 수 있습니다. 멀티 페이지 애플리케이션이 필요한 경우 Webpack을 사용하여 구현해보세요.

참고 자료

© 2018 Colin. All rights reserved.