[Vue] Webpack, CDN

• CDN 방식
• Webpack 방식
• VueCLI, Vite

 

 

 

● CDN 방식 (Content Delivery Network)

: 인터넷에 있는 외부 서버에서 라이브러리를 바로 가져다 쓰는 것

: 별도의 빌드 과정 없이 <script src="..." /> 태그로 바로 사용

: 프로젝트 코드와 별개로 로드 됨

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

 

 

●  웹팩 방식

: 내 프로젝트의 코드와 라이브러리를 모두 한 번에 묶어서 빌드

: 배포용 번들 파일을 만들어 서버에 올려서 사용

 

npm init -y                   # package.json 생성
npm install --save-dev webpack webpack-cli webpack-dev-server

예시 폴더 구조

project-root/
├── src/
│   └── index.js     ← 내 자바스크립트
├── public/
│   └── index.html   ← HTML 템플릿
├── dist/            ← 웹팩이 빌드 후 결과물을 저장
├── webpack.config.js
└── package.json

 

그리고 webpack.config.js 설정, public/index.html 설정 등 이것 저것 설정한 뒤 실행해주면 되는데

실행
npx webpack serve

 

 

vue에서는 보통 이렇게 webpack을 쓰진 않는다.

vueCLI 내부에 Webpack설정이 포함되어 있거나 Vite(Webpack대체) 를 사용하기 때문이다.

 

 

● Vue CLI

npm install -g @vue/cli
vue create my-project

 

 

● Vite

npm create vite@latest my-vue-app
cd my-vue-app
npm install
npm run dev