[Django Tutorial] Blog 만들기 (13)

728x90

vue project에서 만든걸 django에서 보려면 웹팩 결과물들을 django directory로 이동해야한다. 지금까지는 수동으로 했는데 이걸 자동으로 해주는 웹팩 플러그인이 있다. : filemanager-webpack-plugin-fixed

filemanager-webpack-plugin-fixed

www.npmjs.com/package/filemanager-webpack-plugin-fixed

filemanager-webpack-plugin-fixed

This Webpack plugin allows you to copy, archive (.zip), move, delete files and directories before and after builds

www.npmjs.com

제공된 예시가 Webpack.config.js 인데 지금 vue.config.js를 쓰고 있다.

* 일반적으로 webpack 사용시에는 webpack.config.js 를 직접 수정하지만, vue cli를 사용중이기 때문에 vue.config.js를 통해 webpack까지 설정이 가능하다. vue.confog.js 에서는 webpack 설정을 할때 configureWebpack 속성을 이용한다.

npm i filemanager-webpack-plugin-fixed -D (개발할때만 쓰니까 -D 옵션 붙여주자)

터미널에서 실행하면 아래와 같은 명령어가 나오는데 보안 취약점이 있으니 아래와 같은 명령어를 입력하라는 얘기다.

개선되는 게 없다고 나온다. lodash라는 패키지에 문제가 있고 등급은 Low라고 나오는데 Prototype Pollution이라는 문제라고 한다. 현재 해결책은 없다고 하고 등급도 낮으니 무시한다.

vue.config.js

const FileManagerPlugin = require('filemanager-webpack-plugin-fixed');

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

  devServer: {
    index: 'home.html',
  },

  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: {
      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,
    },
  },

  configureWebpack: {
    plugins: [
      new FileManagerPlugin({
        onStart: {
          delete: [
            '../backend/static/**/',
            '../backend/templates/**/',
          ],
        },

        onEnd: {
          copy: [
            { source: 'dist/static', destination: '../backend/static/' },
            { source: 'dist/favicon.ico', destination: '../backend/static/img/' },
            { source: 'dist/home.html', destination: '../backend/templates/' },
            { source: 'dist/post*.html', destination: '../backend/templates/blog/' },
          ],
        }
      }),
    ]    
  },


}

configureWebpack 설정

onStart: {
            delete: [
              '../backend/static/**/',
              '../backend/templates/**/',
            ],
          },

빌드작업 시작하기 전에 backend 밑의 static폴더와 tempates 폴더를 모두 삭제하라고 지시.

onEnd: {
            copy: [
              { source: 'dist/static', destination: '../backend/static/'},
              { source: 'dist/favicon.ico', destination: '../backend/static/img/'},
              { source: 'dist/home.html', destination: '../backend/templates/'},
              { source: 'dist/post*.html', destination: '../backend/templates/blog/'},
            ],
          }

빌드작업이 끝난후 빌드결과물인 dist/static을 backend/static으로 복사를 해주고

dist/favicon.ico도 backend/static/img/로 복사를 해준다. (백엔드에서 favicon은 img파일로 침)

dist/home.html은 backend/templates/로, dist/post_list.html과 dist/post_detail.html은 backend/templates/blog/로 복사해준다. (../backend/blog/templates/blog/ 로 해줘도 괜찮음)

index.html열어서 favicon url을 django에 맞춰준다.

<!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">
    <link rel="icon" href="/static/img/favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

웹팩플러그인의 favicon 옵션을 사용해도 된다. <%= htmlWebpackPlugin.options.favicon %>

빌드해준다.

728x90

저작자표시

'웹 프로그래밍' 카테고리의 다른 글

[Django Tutorial] Blog 만들기 (16) (0)	2021.04.24
[Django Tutorial] Blog 만들기 (15) (0)	2021.04.23
[Django Tutorial] Blog 만들기 (12) (0)	2021.04.22
[Django Tutorial] Blog 만들기 (14) (0)	2021.04.21
[Django Tutorial] Blog 만들기 (11) (0)	2021.04.20

filemanager-webpack-plugin-fixed

'웹 프로그래밍' 카테고리의 다른 글

티스토리툴바