니르바나
2k
2020-02-01 19:26:52 작성 2020-02-01 19:27:19 수정됨
5
821

webpack bundle tracker 용도가 어떤건가요?


https://github.com/owais/webpack-bundle-tracker

깃헙에 정의는 아래와 같습니다.

Spits out some stats about webpack compilation process to a file.

웹팩 컴파일 프로세스 파일에 대한 stats 파일을 쪼개는거라는데 의미를 잘 모르겠네요.

webpack은 나뉘어져 있는 파일을 bundle.js 처럼 하나로 묶어주는 역할을 한다는건 알고 있구요.

webpack bundle tracker를 추가하면 어떤 이점이 있는건가요?

장고랑 vue 연결할때 번들트래커를 사용하길래 생각없이 사용했는데 왜 쓰는지를 잘 모르겠네요.ㅠ


1
  • 답변 5

  • 니르바나
    2k
    2020-02-01 19:40:46

    아, 아래 두 링크를 읽으니 이해가 되네요.

    웹팩을 쓰면 bundle 파일이 나오는데 django와 vue와 연동하기위해서는

    해당 파일에 대한 정보들을 django에서 알아야 합니다.


    그런데 장고에선 알 수 없으니 webpack loader라는 장고쪽 플러그인과

    frontend쪽에선 webpack bundler tracker를 통해서 장고에서 해석할 수 있는 설정 파일을

    만들어주는 것 같네요.


    그게 webpack-stats.json파일인것 같습니다.


    https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/

    https://github.com/owais/django-webpack-loader




  • 니르바나
    2k
    2020-02-01 19:45:38

    제가 잘못 이해한 것이 있다면 정정해주시면 감사하겠습니다.

  • Mambo
    6k
    2020-02-01 22:30:57

    네. 애초에 webpack-bundler-tracker는 번들 처리에 대한 통계를 만들어주는 플러그인이지만 django-webpack-loader에서 말하는 것 처럼 그 통계 파일을 사용하도록 설계되었다는 겁니다.

    아마 번들에 대한 청크 파일들과 경로를 파악하기 위해서 사용하겠죠

  • 니르바나
    2k
    2020-02-02 04:30:42

    감사합니다.

    번들처리에 통계라고하면 얼마나 압축이 되었는지 등 처리 정보를 나타내기 위한 목적인데

    해당 정보에 파일 위치 등 정보도 있으니 그걸 django에서 사용하기 위해 이용된다는 말씀이시죠?


    감사합니다~~

    이해한게 그래도 맞았네요.

  • 니르바나
    2k
    2020-02-04 14:58:03

    The key to understanding how the connection between Vue JS and Django operates is to understand that we use two support packages to actually connect the two, both created by the same developer for this specific use cases.

    1) webpack-bundle-tracker: https://github.com/owais/webpack-bundle-tracker
    Creates some stats files based on the files that as you correctly say are "built in n memory" by the development server


    2) django-webpack-loader: https://github.com/owais/django-webpack-loader
    Reads the files created by webpack-bundle-tracker and injects the code into django's templates.




    As shown and explained in detail in the course, we use both development servers (django's and webpack's) + the two packages explained above so that we can take advantage of Hot Module Replacement (HMR: https://webpack.js.org/concepts/hot-module-replacement/) which is the feature that in fact "builds those files in memory" and that allow then webpack-bundle-tracker to create those stats files read by django-webpack-loader that then injects everything into Django's templates.




    When we build the files for production we then just use them as any other static file, and no webpack server is used in production.


    That's it.


    I hope this clarified your understanding of the two, some struggles while learning are completely normal, don't give up!


    I suggest you watch again carefully the lessons about the connection with the two frameworks and the production settings if you have any other doubts: everything is explained in detail.


    제가 듣는 강의 강사가 답변해준게 더 자세해서 참고하시라고 퍼옵니다~

  • 로그인을 하시면 답변을 등록할 수 있습니다.