[javascript] Vue.js와 Webpack의 연동하기

01 Dec 2023

javascript

이번 글에서는 Vue.js와 Webpack을 함께 사용하는 방법에 대해 알아보겠습니다. Vue.js는 프론트엔드 개발을 위한 자바스크립트 프레임워크이며, Webpack은 모듈 번들러로서 여러 모듈을 하나의 파일로 번들링하여 사용할 수 있게 해줍니다.

Vue.js와 Webpack 설치하기

먼저 Vue.js와 Webpack을 설치해야합니다. 이를 위해서는 Node.js가 설치되어 있어야합니다.

# 프로젝트 폴더 생성
mkdir my-vue-webpack-project
cd my-vue-webpack-project

# package.json 파일 생성
npm init -y

# Vue.js 설치
npm install vue

# Webpack과 관련된 패키지 설치
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin

# Babel 설치
npm install babel-loader @babel/core @babel/preset-env --save-dev

Vue.js와 Webpack 설정하기

이제 Vue.js와 Webpack을 연동하기 위한 설정을 해보겠습니다.

프로젝트 폴더에 webpack.config.js 파일을 생성하고 아래와 같이 설정합니다.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
};

프로젝트 폴더에 src 폴더를 생성하고 그 안에 main.js 파일을 생성합니다.

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

프로젝트 폴더에 index.html 파일을 생성하고 아래와 같이 작성합니다.

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

프로젝트 폴더에 .babelrc 파일을 생성하고 아래와 같이 작성합니다.

{
  "presets": ["@babel/preset-env"]
}

프로젝트 실행 및 빌드하기

이제 프로젝트를 실행하고 빌드해보겠습니다.

# 개발 서버로 실행하기
npm run dev

# 빌드하기
npm run build

결론

이제 Vue.js와 Webpack을 연동해서 프로젝트를 시작할 수 있습니다. Vue.js의 강력한 기능과 Webpack의 모듈 번들링 기능을 함께 사용하여 효율적인 개발을 할 수 있습니다. 앞으로 Vue.js와 Webpack을 적극적으로 활용하여 프로젝트를 구성해보세요!

참고 자료: