인프런 커뮤니티 질문&답변

kwonjiwoo님의 프로필 이미지
kwonjiwoo

작성한 질문수

Vue.js - Django 연동 웹 프로그래밍 (실전편)

뷰 폴더 복사하기

filemanager webpack plugin

작성

·

295

0

// webpack.config.js:

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

export default {
  // ...rest of the config
  plugins: [
    new FileManagerPlugin({
      events: {
        onEnd: {
          copy: [
            { source: '/path/fromfile.txt', destination: '/path/tofile.txt' },
            { source: '/path/**/*.js', destination: '/path' },
          ],
          move: [
            { source: '/path/from', destination: '/path/to' },
            { source: '/path/fromfile.txt', destination: '/path/tofile.txt' },
          ],
          delete: ['/path/to/file.txt', '/path/to/directory/'],
          mkdir: ['/path/to/directory/', '/another/directory/'],
          archive: [
            { source: '/path/from', destination: '/path/to.zip' },
            { source: '/path/**/*.js', destination: '/path/to.zip' },
            { source: '/path/fromfile.txt', destination: '/path/to.zip' },
            { source: '/path/fromfile.txt', destination: '/path/to.zip', format: 'tar' },
            {
              source: '/path/fromfile.txt',
              destination: '/path/to.tar.gz',
              format: 'tar',
              options: {
                gzip: true,
                gzipOptions: {
                  level: 1,
                },
                globOptions: {
                  // https://github.com/Yqnn/node-readdir-glob#options
                  dot: true,
                },
              },
            },
          ],
        },
      },
    }),
  ],
};

https://github.com/gregnb/filemanager-webpack-plugin

다른 분 답변에서 알려주신 깃허브 링크에서 copy 해온 코드인데요, 현재는 또 다른 코드로 업데이트? 가 된 것 같습니다.

강사님께서 강의에서 진행하신 코드와 다른 부분이 많아서, 정확히 어떻게 코드를 넣어야할지 모르겠어서요 ㅠㅠ

그리고 정확히 이 filemanager webpack plugin 과 웹팩이 저희 vue-django 프로젝트에서 어떤 역할을 하는 것인지 감이 잘 안옵니다 ㅠㅠ 간략히 설명 부탁드려도 될까요?

답변 2

0

김석훈님의 프로필 이미지
김석훈
지식공유자

안녕하세요. 독자님.

섹션 11 이, filemanager webpack plugin 을 사용하지 않는 방법입니다. 이 플러그인은 frontend 결과물을 backend 폴더로 복사해주는 것인데, 섹션 11 방식에서는 복사를 안 해주는 방식 입니다.

섹션 3 보다 간편한 방식이므로, 섹션 11 을 먼저 공부하시기 바랍니다.

다만 섹션 3을 먼저 찍은 후에 나중에 섹션 11 을 추가한 것이라, 섹션 11 설명 중에서 일부는 섹션 3을 언급하는 게 있을 겁니다. 이런 경우만 주의해서 섹션 3을 참고하면 될 듯 합니다.

공부 중에 안되면 다시 올려 주세요.

0

안녕하세요, 인프런 AI 인턴이에요.

filemanager-webpack-plugin은 웹팩을 통해 파일 및 폴더를 관리하기 위한 플러그인입니다. 여러 파일 및 폴더 작업을 수행할 수 있습니다.

위의 예시 코드에서는 파일과 폴더 작업을 할 때 다양한 이벤트와 옵션을 설정할 수 있습니다. 예를 들어, onEnd 이벤트에서 copy, move, delete, mkdir, archive 작업을 수행하는 예시 코드를 확인할 수 있습니다.

copy: 원하는 경로에 파일을 복사합니다.
move: 파일을 다른 경로로 이동합니다.
delete: 파일이나 폴더를 삭제합니다.
mkdir: 새로운 폴더를 생성합니다.
archive: 파일이나 폴더를 아카이브 파일로 압축합니다.

각 작업에 대한 소스 경로(source)와 대상 경로(destination)를 설정할 수 있으며, 아카이브 작업의 경우 포맷(format)과 옵션(options)도 설정할 수 있습니다.

자세한 내용은 filemanager-webpack-plugin의 문서(https://www.npmjs.com/package/filemanager-webpack-plugin)를 참고해주세요.

더 궁금한 점이 있으시면 언제든지 물어보세요. 좋은 하루되세요!

kwonjiwoo님의 프로필 이미지
kwonjiwoo
질문자

개념은 알겠는데 저 코드를 강사님과 같은 식으로 짜려면 어떻게 수정해야 할지 모르겠습니다 .. ㅠ 버전이 다른 거 같은데

김석훈님의 프로필 이미지
김석훈
지식공유자

안녕하세요. 독자님.

섹션 10 에서 제공한 소스에서, VueDjangoVite 버전이 Vuetify v3.0 기준으로 현행화한 소스이니, 이 소스와 섹션 11 강의를 참고 바랍니다.

강의가 예전 버전이라 불편하실겁니다. 제가 알고 있지만 시간을 못내고 있습니다. 송구합니다.

 

kwonjiwoo님의 프로필 이미지
kwonjiwoo
질문자

아 그렇군요. 감사합니다 혹시 그러면 이 웹팩 플러그인을 사용하지 않으면 블로그 웹사이트 개발과 배포에 문제가 생길까요? 코드를 어떻게 작성해야할지 몰라서 이 부분은 아직 안하고 있습니다

kwonjiwoo님의 프로필 이미지
kwonjiwoo

작성한 질문수

질문하기