# Webpack 멀티 페이지 설정

Webpack 개발 환경에서 멀티 페이지 앱(MPA)을 만들어야 한다면 몇 가지 설정이 필요합니다.

{% tabs %}
{% tab title="디렉토리 구조" %}

```bash
.
├── config/
├── src/
│   ├── assets/
│   ├── components/
│   ├── modules/
│   ├── polyfills/
│   ├── styles/
│   │   └── subpage.scss # 서브 페이지 스타일
│   ├── template/
│   │   └── page.ejs     # 페이지 템플릿
│   ├── pages
│   │   └── subpage.js   # 서브 페이지
│   └── index.js         # 메인 페이지
├── package-lock.json
└── package.json
```

{% endtab %}

{% tab title="webpack.config.js" %}

```javascript
module.exports = {
  // 입력 설정
  entry: {
    main: './src/index.js',
    subpage: './src/pages/subpage.js'
  },

  // 출력 설정
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js',
  },

  // 플러그인 설정
  plugins: [
    // 메인 페이지
    new HtmlWebpackPlugin({
      // 파일 이름
      filename: 'index.html',
      // 청크
      chunks: ['main'],
      // 문서 메타
      meta: {
        'theme-color': '#4285f4',
        'description': 'Webpack 러닝 가이드 실습을 진행합니다.',
      },
      // 사용자 정의 옵션
      templateParameters: {
        title: 'Webpack 러닝 가이드',
        lang: 'ko-KR',
      },
      template: './src/template/page.ejs',
      inject: false,
      minify: true,
    }),
    
    // 서브 페이지
    new HtmlWebpackPlugin({
      filename: 'subpage.html',
      chunks: ['subpage'],
      meta: {
        'theme-color': '#4285f4',
        'description': 'Webpack 러닝 가이드 서브 페이지 입니다.',
      },
      templateParameters: {
        title: '서브 페이지 | Webpack 러닝 가이드',
        lang: 'ko-KR',
      },
      template: './src/template/page.ejs',
      inject: false,
      minify: true,
    }),
  ]
}
```

{% endtab %}

{% tab title="src/pages/subpage.js" %}

```javascript
/** @jsx createElement */
import '../styles/subpage.css'
import { getNode, createElement, render } from '../modules/DOM'

/* -------------------------------------------------------------------------- */

const rootNode = getNode('#root')
const headlineNode = <h1 class="subpage headline">서브 페이지</h1>
render(headlineNode, rootNode)
```

{% endtab %}

{% tab title="src/styles/subpage.css" %}

```css
body {
  background: #222;
  color: #fff;
}
```

{% endtab %}
{% endtabs %}

[빌드 명령](https://yamoo9.gitbook.io/webpack/webpack-plugins/manage-env-variables#build)을 실행하여 출력한 결과를 살펴보면, 멀티 HTML, CSS, JavaScript 파일이 생성된 것을 확인할 수 있습니다.

![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MTpoFn8-f82O4ULNaK6%2F-MTpoYdin_VYunlJqOtB%2Fimage.png?alt=media\&token=0db01945-a069-4f58-8181-7c7f98401934)