Vue.js - Webpack Template

01.Vue3 Webpack Template

webpack을 통해 만들었던 템플릿을 활용하여 Vue.js 개발환경을 설정합니다.
Github-webpack-template-basic

02.VS Code로 가져오기

$ npx degit JangJinWon/webpack-template-basic vue3-webpack-template
$ cd vue3-webpack-template
$ code . -r
원격저장소에 있는 제가 원하는 위치에 vue3-webpack-template라는 폴더를 만들어 VS Code로 가져오도록 합니다.

새로 만든 vue3-webpack-template 폴더로 이동 합니다.

03.Vue.js에 맞게 수정하기

3-1. src 폴더 생성

프로젝트 루트 경로에 src 폴더를 생성 합니다.
루트 경로에 있는 js 폴더는 삭제 합니다.

3-2.main.js, App.vue 파일 생성

src 폴더 내에 main.js, App.vue 파일을 생성 합니다.

3-3.vue 설치하기

$ npm i vue@next
Vue.js 최신의 3버전을 설치하기 위해 vue@next라는 명령어를 입력해줍니다.

개발 환경뿐만 아니라 브라우저에서 동작시킬 수 있도록 해야하므로 개발 의존성이 아닌 일반 의존성으로 설치합니다.

04.추가 패키지 설치하기

$ npm i -D vue-loader@next vue-style-loader '@vue/compiler-sfc'
.vue 확장자의 파일을 프로젝트에서 실제로 관리하려면 추가적인 webpack과 관련된 패키지를 설치해야 합니다.

총 3가지를 개발 의존성으로 설치하며 이중 @vue/compiler-sfc는 Vue.js 파일을 브라우저에서 동작할 수 있도록 변환하는 역할을 합니다.

05.webpack.config.js

// import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader"); // vue

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./src/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  module: {
    rules: [
      {
        // vue
        test: /\.vue$/, // .vue로 끝나는 확장자 파일을 검색하는 정규 표현식
        use: "vue-loader" // vue-loader 연결
      },

      {
        test: /\.s?css$/, // .scss 또는 .css확장자로 끝나는 파일을 찾는 정규 표현식
        use: [
          // vue
          "vue-style-loader", // vue 파일 내부에 있는 style 태그를 해석해서 동작시켜주는 패키지
          "style-loader", // main.css에 해석된 내용을 삽입하는 패키지
          "css-loader", // JS에서 CSS 파일을 해석하는 패키지
          "postcss-loader", // 공급업체 접두사를 적용해주는 패키지
          "sass-loader"
        ]
      },
      {
        test: /\.js$/,
        use: [
          "babel-loader"
        ]
      }
    ]
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    }),
    new CopyPlugin({
      patterns: [
        { from: "static" } // static 폴더안에 있는 내용들이 복사되어 dist폴더 안에 들어갈 수 있게 설정하는 옵션
      ]
    }),
    new VueLoaderPlugin() // vue
  ],

  devServer: {
    host: 'localhost'
  }
}

webpack.config.js의 구성 옵션을 수정 합니다.
템플릿 내용에서 Vue.js를 활용하기 위해 필요한 부분만 수정하면 됩니다.

06.프로젝트 테스트하기

6-1.App.vue

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!!!'
    }
  }
}
</script>

6-2.main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

6-3.index.html

<body>
  <div id='app'></div>
</body>

6-4.개발 서버 오픈

$ npm run dev
페이지에 Hello Vue!!!가 정상적으로 출력되면 완성 입니다.

Author And Source

이 문제에 관하여(Vue.js - Webpack Template), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlsdnjs156/Vue.js-Webpack-Template

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)