[javascript] Webpack과 Vue.js 함께 사용하기

29 Nov 2023

javascript

소개

Vue.js는 가볍고 유연한 프론트엔드 JavaScript 프레임워크로, 웹 애플리케이션 개발에 많이 사용됩니다. 그리고 Webpack은 모듈 번들러로서, 프로젝트의 자바스크립트, CSS, 이미지 등의 파일을 하나로 번들링하여 로딩 시간을 개선해줍니다. 이번 블로그 포스트에서는 Webpack과 Vue.js를 함께 사용하는 방법에 대해 알아보겠습니다.

시작하기 전에

먼저, Webpack과 Vue.js를 함께 사용하기 위해서는 Node.js와 npm이 설치되어 있어야 합니다. Node.js와 npm을 설치하려면 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.

프로젝트 설정하기

새로운 디렉토리를 생성하고 해당 디렉토리로 이동합니다.

mkdir my-project
cd my-project

npm init 명령어를 실행하여 새로운 npm 프로젝트를 설정합니다.

npm init

Vue.js와 관련된 의존성 패키지를 설치합니다.

npm install vue

Webpack과 관련된 의존성 패키지를 설치합니다.

npm install webpack webpack-cli --save-dev

Webpack 설정 파일인 webpack.config.js를 생성합니다.

touch webpack.config.js

webpack.config.js 파일을 열고 다음과 같이 기본 설정을 추가합니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

src 디렉토리를 생성하고 index.js 파일을 생성합니다.

mkdir src
touch src/index.js

index.js 파일에 다음과 같이 간단한 Vue.js 앱을 작성합니다.

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
  template: '<div></div>',
});

index.html 파일을 생성하고 다음과 같이 내용을 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webpack and Vue.js</title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

npm run build 명령어를 실행하여 Webpack을 통해 프로젝트를 번들링합니다.

npm run build

웹브라우저에서 index.html 파일을 열고 Vue.js 앱이 정상적으로 작동하는지 확인합니다.

마무리

이제 기본적인 Webpack과 Vue.js를 함께 사용하는 방법을 알아보았습니다. 이를 기반으로 프로젝트를 확장하고 컴포넌트를 추가하여 더 복잡한 Vue.js 애플리케이션을 개발할 수 있습니다.