[Vuejs] Webpack이란?

 

 

Webpack이 뭔 지 감도 안왔는데, 정말 친절하게 설명해주는 글을 발견하여 정리해보았다. 출처는 하단에! 😎

---

Webpack?

브라우저는 HTML, CSS, Javascript (즉, 확장자가 .html, .css, .js 인 것들)만 인식한다.

JSP는 HTML 코드 안에 Java 코드를 삽입함으로써, 서버에서 동적 영역을 채워놓은 HTML 코드이다.

그렇기 때문에 확장자가 .jsp 이어도, 브라우저는 최종적으로는 해당 파일을 HTML 파일로 인식한다.

마찬가지로, Vue.js는 확장자가 .vue이다. 브라우저는 이를 어떻게 인식하여 동작하는 것 일까?

결론부터 말하자면, 브라우저는 .vue 확장자를 Javascript 파일로 인식한다.

그리고, 이를 가능케 해주는 것이 바로 Webpack이며, Webpack은 Bundle이라는 과정을 거쳐, .vue 파일을 .js 파일로 변환해준다.

그래서 Webpack은 Module Bundler라고 불린다.

(vue cli로 프로젝트를 생성하면 기본적으로 웹 팩 기반의 프로젝트가 된다.)

---

Webpack이 Bundle을 시작하기 위해서는, 시작점 역할을 파는 파일이 필요하다.

그 파일을 Entry File(엔트리 파일)이라고 부른다. 파일이 존재한다고, 무조건 번들링을 하는 것이 아니기 때문에 엔트리 파일을 기점으로 하여 번들링 해야하는 파일만 진행하는 것이다.

(보통 main.js가 엔트리 파일 역할을 한다. Vue 인스턴스 생성 역할. vue.config.js에서 엔트리 파일을 임의로 지정해줄 수 있다.)

 

 

실제로, 내가 개인 프로젝트를 하기 위해 셋팅한 main.js를 보면

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App'
import BootStrapVue from 'bootstrap-vue-3';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';
import router_main from './router/index.js'

//createRotuer : 실제 Vue Router 인스턴스를 생성할 때 쓰이는 function
const router = createRouter(
    {
        /** process.env.BASE_URL은 기본 값으로 "/"를 갖는다. 
         다만, vue.config.js 파일에서 임의로 설정 값을 지정할 수 있다. */

                  //createWebHashHistory : Vue Router를 통해 URL로 매핑된 vue 컴포넌트를 전환할 시에 필요한 히스토리 관리 기법을, 해시형으로 쓸 수 있게 해주는 인스턴스를 생성하는 function 
                  //createWebHistory : 또 다른 인스턴스 생성 기법. hash(#)가 붙지 않는다.
        history : createWebHistory(process.env.BASE_URL),
        routes : router_main
    }
)

const app = createApp(App);
app.use(router);
app.use(BootStrapVue);

const instance = app.mount('#app');

export { app, instance };

 

createApp function으로 만들어지는 게, Vue Application 인스턴스

인스턴스 생성 시, 전달되는 저 App이라는 파라미터는 App.vue이라는 모듈(파일)이다.

엔트리 파일이 번들링의 시작점을 알려준다면, App.vue 파일은 .vue 파일들의 진입점을 해주는 역할이다. (여기서 약간 멈칫 ,,ㅎ 그냥 컴포넌트들의 최상위 컴포넌트라는 의미인 것 같다.)

 

모든 .vue 확장자인 파일들이 최상위 컴포넌트인 App.vue에 모여, 이를 main.js에 import하여 인스턴스를 생성.

즉, main.js에서는 createApp function을 통해 App.vue를 시작점으로 하는 app 인스턴스를 생성해준다.

---

마지막으로, app.mount('#app'); 처리를 해주는데

여기서 #app이란, 단 하나의 HTML 파일인, index.html의 div 태그의 id 값이다. 실질적으로 그려지는 코드는 App.vue가 될 것.

---

 

 

Reference (👍🏻)

[Vue.js_#03] N : 1 (feat. webpack)