질문을 삭제하지 말아주세요.!
 
1
0
-1

안녕하세요.

webpack을 사용하면서 궁금한게 생겼습니다.

제가 잘못 사용하고 있을 수 있는데요. 저는 보통 resource/asset/js, resource/asset/sass 폴더 내 각각 파일들을 비치하고..

'app.js'나 'app.scss'에는 공통으로 사용하는 것들을 require, import 합니다.

그리고 각각의 뷰 페이지 단위로 js 파일과 scss 파일을 만들어줍니다.

(이 때, 'app.js'나 'app.scss'나 각 뷰 페이지 단위의 js 파일 또는 scss 파일 내에서는 필요한 플러그인이 있다면 require, import 합니다.)

그리고 'webpac.mix.js'에는 아래와 같이 해줍니다.


mix.js('resources/assets/js/app.js', 'public/js')

   .sass('resources/assets/sass/app.scss', 'public/css')

   .js('resources/assets/js/main.js', 'public/js')

   .sass('resources/assets/sass/main.scss', 'public/css')

   .js('resources/assets/js/home/common.js', 'public/js/home')

   .sass('resources/assets/sass/home/common.scss', 'public/css/home')

   .js('resources/assets/js/home/main.js', 'public/js/home')

   .sass('resources/assets/sass/home/main.scss', 'public/css/home')

   .js('resources/assets/js/home/login.js', 'public/js/home')

   .sass('resources/assets/sass/home/login.scss', 'public/css/home')

   .js('resources/assets/js/home/member.js', 'public/js/home')

   .sass('resources/assets/sass/home/member.scss', 'public/css/home');


그리고 각각의 뷰 파일에는 'app.js', 'app.css' 파일을 공통적으로 불러오고, 추가적으로 각 뷰 페이지에 맞는 js 파일과 css 파일을 불러옵니다.


느낌이 찝~찝~한게 올바른 사용 방법이 아닌 것 같은데, 보통 어떻게 사용하는건가요?


찾아본바로는... 서버사이드 자바스크립트 경우 라우팅과 함께, 동적으로 파일을 불러준다는 등...

그렇지만 저는, 서버단에서 자바스크립트를 사용하지 않습니다.


귀찮으시겠지만, 자세한 설명을 해주시면, 가까운 미래에 부자가 되서 TV에 나오고 이름 한번 불러드리겠습니다.


혹시 김주원님 보신다면, 잘 부탁드립니다. 똑같은 책을 제가 3권이나 샀어요.



감사합니다.

    CommentAdd your comment...

    1 answer

    1.  
      2
      1
      0

      제가 프알못, 프런트 고자라 질문에 대해 구체적인 답변은 다른 분에 패스합니다.

      (사견입니다.) 모던퍼그 페북의 토론에 의하면, 대형 서비스들이 HTTP2로 전환했고, 대부분의 웹 서버와 클라이언트가 HTTP2를 지원하는 시대에, 리소스 번들링은 굳이 할 필요가 없어 보입니다. 번들링은 HTTP Requset 여러번을 한번에 함으로써 쓸데 없는 오버헤드를 줄인다는 목적을 가지고 있습니다. HTTP2의 시대에도 여전히 SPA(Single Page Application)을 개발한다면 번들링은 고려해야 할 도구이긴합니다.

      1. 김영우

        답변 감사합니다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 말씀하신대로라면 살짝 위로가 되네요. 전혀 엉뚱한짓하고 있던건 아닐까 걱정하고 있었거든요.

        그렇지만, 여러 개의 스타일시트파일을 하나의 파일로, 여러 개의 자바스크립트 파일을 하나의 파일로 합쳐주고, 각 하나씩만 로드하게 된다면, 각 뷰 페이지에서 해당 뷰 페이지를 위한 코드들만 실행되는 그런 것도 가능하진 않을까 고민해봅니다. (A페이지에서 B페이지로 이동할 때, 이미 로드했던 css파일이나 javascript파일이라면 더 이상 요청을 하지 않는, 그런 오버헤드를 덜 줄 수 있다는 가정하에)

      CommentAdd your comment...