[WEBPACK] 뷰 템플릿 만들기 - 1

create vue template -1

 

회사에서 간단하게 사용할 겸, 이전에 스터디 했던 내용도 정리할 겸. webpack을 이용하여 vue template을 제작하려고 합니다. 관심 있으신 분들에게 도움이 되었으면 좋겠네요. :)

VUE ?

VUE는 vue.js라고 하며 사용자 인터페이스를 구축하기 위한 점진적인 JavaScript 프레임워크입니다.
Evan You에 의해 2014년에 처음 소개되었으며, 간단한 페이지에서부터 복잡한 싱글 페이지 애플리케이션(SPA)까지 다양한 웹 인터페이스 개발에 사용됩니다. 
다양한 개발 플러그인 지원과 상대적으로 학습하기 쉬운편이라 초보자도 쉽게 시작할 수 있다는 장점이 있습니다.
VUE에 대한 상세한 특징에 대해서는 구체적으로 기술하지 않겠습니다.

 

WEBPACK ?

Webpack은 현대 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. 웹 개발 프로젝트에서 사용하는 HTML, CSS, JavaScript, 이미지 파일 등 다양한 자원(모듈)들을 처리하여, 브라우저에서 사용할 수 있는 파일(번들)로 합치고 최적화하는 도구입니다. 2012년에 Tobias Koppers에 의해 처음 소개된 이후, 프론트엔드 개발의 복잡성이 증가함에 따라 필수적인 도구 중 하나로 자리 잡았습니다.
Webpack은 이러한 기능을 통해 프론트엔드 자원을 효율적으로 관리하고, 최적화된 자원을 제공함으로써 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 최근 웹 개발 프로젝트에서는 복잡한 모듈 구조와 다양한 자원을 효과적으로 관리하기 위해 Webpack을 필수적으로 사용하고 있습니다.

■ 실습목표

webpack을 사용한 기본 템플릿, Vue 템플릿을 생성,
온라인만이 아닌 오프라인 환경에서도 동작 가능하게 구성하는 것이 목표입니다.

■ 실습환경

OS : windows11
개발도구 : visual studio, npm(node package manage)

■ 실습

1. 프로젝트 생성

npm init -y

 

npm init :
명령어는 Node.js 프로젝트를 초기화하기 위해 사용되며, -y 또는 --yes 플래그를 사용함으로써 모든 질문에 대해 기본값을 자동으로 수락하고 package.json 파일을 생성합니다. npm init 과정에서 일반적으로 프로젝트의 이름, 버전, 설명, 진입점(main), 테스트 명령, 저장소, 키워드, 저자, 라이선스 등에 대한 정보를 입력하라는 프롬프트가 나타나지만, -y 옵션을 사용하면 이러한 단계를 건너뛰고 기본값으로 package.json 파일을 즉시 생성합니다.

2. webpack 설치

npm i -D webpack webpack-cli webpack-dev-server@next

webpack:
웹팩은 모듈 번들러로, 프로젝트의 자바스크립트, 스타일시트, 이미지 등 다양한 리소스들을 하나로 번들링하는 역할을 합니다.
코드 스플리팅, 로더, 플러그인을 통해 여러 기능을 제공하여 모던 웹 개발에서 필요한 다양한 작업을 수행할 수 있도록 해줍니다.
webpack-cli:
웹팩 명령줄 인터페이스(CLI)를 제공하는 도구입니다. 이를 통해 명령어를 통해 웹팩 빌드 및 관련 작업을 수행할 수 있습니다.
webpack-dev-server@next:
webpack-dev-server는 개발용 웹 서버를 제공하여 빠른 개발 환경을 구성할 수 있도록 도와줍니다.
@next는 최신 버전의 webpack-dev-server를 설치하라는 의미이며, 보통 개발 중에 나온 최신 기능이나 버그 수정을 포함한 최신 릴리스를 사용하도록 합니다.

3. html-webpack 플러그인 설치

npm i -D html-webpack-plugin

html-webpack-plugin:
Webpack을 사용하는 웹 개발 프로젝트에서 HTML 파일을 자동으로 생성하고 관리해주는 플러그인입니다. npm i -D html-webpack-plugin 명령어는 이 플러그인을 개발 의존성(development dependency)으로 프로젝트에 설치합니다. -D 플래그는 --save-dev의 축약형이며, 개발 시에만 필요한 패키지임을 나타냅니다.

4. css 플러그인 설치

npm i -D css-loader style-loader

css-loader, style-loader:
 Webpack을 사용하여 웹 프로젝트를 개발할 때 CSS 파일을 처리하는 데 필요한 로더입니다. 이들은 CSS 파일을 모듈로서 임포트할 수 있게 하여, 자바스크립트 파일 내에서 CSS를 직접 사용할 수 있도록 해 줍니다. npm i -D css-loader style-loader 명령어는 이 두 로더를 개발 의존성(development dependency)으로 프로젝트에 설치합니다.
css-loader 와 style-loader 를 사용함으로써, CSS 스타일을 모듈화하고 자바스크립트를 통해 동적으로 관리할 수 있게 되어, 웹 애플리케이션의 스타일링 과정을 보다 효율적으로 구성할 수 있습니다.

5. css 관련 추가 플러그인 설치

npm i -D postcss autoprefixer postcss-loader

PostCSS :
PostCSS는 CSS를 변환하는 데 사용되는 툴로, JavaScript 플러그인을 사용해 CSS의 신규 문법, 미래의 문법, 또는 사용자가 정의한 문법을 지원합니다. 이는 코드의 재사용성을 높이고, 오래된 브라우저 호환성을 향상시키며, CSS를 더 효율적으로 작성할 수 있도록 돕습니다.
사용 예: 변수, 조건문, 반복문, 네스팅 등의 기능을 CSS에 추가할 수 있습니다.
Autoprefixer:
Autoprefixer는 PostCSS의 한 플러그인으로, CSS에 벤더 접두사(vendor prefixes)를 자동으로 추가해 줍니다. 이는 개발자가 다양한 브라우저의 호환성 문제를 신경 쓰지 않고 CSS를 작성할 수 있게 해줍니다.
사용 예: 개발자가 작성한 CSS 코드에서 필요에 따라 -webkit-, -moz-, -ms-, -o- 등의 접두사를 자동으로 추가합니다.
postcss-loader:
postcss-loader는 Webpack과 함께 사용되는 로더로, Webpack의 빌드 과정 중에 PostCSS를 실행합니다. 이 로더를 통해, Webpack을 사용하여 프로젝트를 빌드할 때 PostCSS 플러그인을 적용할 수 있습니다.
사용 예: Webpack의 module.rules에 postcss-loader를 설정하여, CSS 파일이나 SCSS 파일 등이 빌드될 때 PostCSS와 Autoprefixer 같은 플러그인을 적용할 수 있습니다.

6. babel 설치

npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

@babel/core:
개요: Babel의 핵심 기능을 제공하는 패키지입니다. JavaScript 코드를 파싱하여 AST(Abstract Syntax Tree)로 변환하고, 이를 다시 변환(transform)하거나 생성(generate)하는 역할을 합니다.
@babel/preset-env:
개요: 개발자가 작성한 JavaScript 코드를 대상 환경(target environment)에 맞게 변환해주는 Babel 프리셋입니다. 대상 환경은 브라우저 버전이나 Node.js 버전 등을 의미합니다.
@babel/preset-env는 필요한 특정 변환만을 적용하여, 불필요한 변환을 방지하고 최종 코드의 크기를 최소화합니다. 예를 들어, 화살표 함수(arrow functions), 클래스(class) 등 최신 문법을 지원하지 않는 브라우저에서도 실행될 수 있는 코드로 변환해줍니다.
@babel/plugin-transform-runtime:
Babel 플러그인 중 하나로, Babel이 변환한 코드에서 반복적으로 사용되는 헬퍼 함수들을 @babel/runtime 패키지에서 재사용할 수 있게 해 줍니다. 이는 코드 중복을 줄이고, 빌드 파일의 크기를 감소시킵니다.
특히 비동기 함수(async functions)나 제너레이터(generators) 같은 고급 기능을 사용할 때 필요한 폴리필(polyfills)이나 헬퍼 함수를 글로벌 스코프 대신 모듈 스코프에서 사용할 수 있게 해 줍니다. 이는 글로벌 네임스페이스를 오염시키지 않고, 코드 충돌을 방지합니다.

7. webpack-babel loader 설치

npm i -D babel-loader

babel-loader:
Webpack을 사용하는 JavaScript 프로젝트에서 Babel과 함께 작동하는 Webpack의 로더입니다. 이 로더를 사용함으로써, Webpack의 빌드 프로세스 중에 JavaScript 파일을 Babel을 통해 변환할 수 있습니다. npm i -D babel-loader 명령어는 이 로더를 개발 의존성으로 설치하는 데 사용됩니다. -D는 --save-dev의 축약형이며, 이는 해당 패키지가 개발 시에만 필요하다는 것을 나타냅니다.

8. package.json, webpack.config 등 설정파일 수정

플러그인들이 설치가 완료되면 정상적인 구동을 위해 config 파일을 수정해야 합니다.
해당 파일들에 대한 상세 설명은 생략하지만 
아래 git repository를 참고하시기 바랍니다.
git repository link : 
예제파일 링크

9. 실행

위 코드를 제대로 적용 하셨다면 
" npm run dev " 로 정상적으로 webpack template 실행이 가능하실 겁니다.
다음 포스트에서는 vue.js 까지 적용해보도록 하겠습니다.

webpack sample

sample page