[Django Tutorial] Blog 만들기 (11)

Webpack 을 이용해 3개 페이지 만들기 (home.html, post_list.html, post_detail.html)

보통 webpack은 최종결과물로 1개의 html을 생성함. 예로 앞서 dist아래 1개의html을 생성했었다.

여러개 html을 생성하고 싶다면 vue.config.js 에서 pages라는 설정항목을 사용한다.

 

1

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],

  outputDir: 'dist',
  publicPath: '/',
  assetsDir: 'static',

  pages: {
    home: {
      template: 'public/index.html',
      entry: 'src/pages/main_home.js',
      filename: 'home.html',
      title: 'VueDjangoPhoto/home.html',
      minify: false,
    },
    //post_list: {},
    //post_detail: {},
  }

}

최종결과물에 생기는 html 파일의 이름 (filename). 이 html을 만들때 참조하는 템플릿(template).

webpack build작업의 시작포인트는 entry. 최종 html 소스 보기 쉽게하기 위해서 minify: false.

title 로 정한 문자열은 public/index.html 열어보면 

<title><%= htmlWebpackPlugin.options.title %></title>

여기로 들어감. (html webpack plugin 에서 제공하는 기능이다.)

 

2

현재는 웹팩의 entry 파일이 src/main.js 인데 이 파일과 main.js에서 호출하는 App.vue를 이동시킨다.

(윈도우 탐색기 이용)

 

- frontend/src 밑에 pages 폴더를 생성한다. src밑의 main.js.와 App.vue를 잘라내서 pages 밑에 넣는다.

파일이름 변경:

main.js -> main_home.js

App.vue -> AppHome.vue

 

- main_home 이 AppHome을 호출하도록 소스를 바꿔준다.

import Vue from 'vue'
import App from './AppHome.vue'
import vuetify from '../plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(AppHome)
}).$mount('#app')

*주의할점. 파일이 한단계 밑으로 내려갔으니까 상대경로 변경해주는걸 잊지 말아야함.

import HelloWorld from "../components/HelloWorld.vue" 이런거.

 

- 빌드해주기

npm run build

 

dist 파일 아래에 home.html 이 만들어진 것을 확인할 수 있다.

 

3

home.html 이 잘 만들어진 것을 확인했으니 post_list.html, post_detail.html 도 똑같이 만들거다.

 

- vue.config.js pages 설정항목에 post_list, post_detail을 추가해준다.

pages: {
    home: {
      template: 'public/index.html',
      entry: 'src/pages/main_home.js',
      filename: 'home.html',
      title: 'VueDjangoPhoto/home.html',
      minify: false,
    },

    post_list: {
      template: 'public/index.html',
      entry: 'src/pages/main_post_list.js',
      filename: 'post_list.html',
      title: 'VueDjangoPhoto/post_list.html',
      minify: false,
    },

    post_detail: {
      template: 'public/index.html',
      entry: 'src/pages/main_post_detail.js',
      filename: 'post_detail.html',
      title: 'VueDjangoPhoto/post_detail.html',
      minify: false,
    },
  }

 

- src/pages/main_home.js 를 복사해서 pages 밑에 2개 붙여넣고 이름을 main_post_list.js, main_post_detail.js 로 바꿔준다.

- src/pages/AppHome.vue를 복사해 AppPostList.vue와 AppPostDetail.vue를 만들어준다.

- js파일과 vue 파일 아까처럼 변경해준다.

vue의 경우 컴포넌트를 변경해주자. AppPostList.vue는 PostList.vue, AppPostDetail.vue는 PostDetail.vue 컴포넌트를 주었다. (임시로 components 폴더 아래에 HelloWorld.vue를 복붙해서 만들어주자.)

 

4

빌드해주기

dist 폴더에 home.html, post_list.html, post_detail.html 확인할 수 있다.

 

웹팩에 대해서

보통 웹팩은 한개의 html을 만들고 한개의 html 내에서 js동작을 통해서 여러개의 화면을 구현한다.

이런 방식을 SPA: Single Page Application 이라고 한다.

대조되는 방식에는 MPA: Multi Page Application 이 있다.

한개의 뷰 프로젝트 내에서 여러개의 html을 만들는 방식. 여기서 사용한 방식이 MPA 방식이다.