Webpack 멀티 페이지 설정

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

디렉토리 구조

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

webpack.config.js

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,
    }),
  ]
}

src/pages/subpage.js

/** @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)

src/styles/subpage.css

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

빌드 명령을 실행하여 출력한 결과를 살펴보면, 멀티 HTML, CSS, JavaScript 파일이 생성된 것을 확인할 수 있습니다.