src 폴더 내부에 main.js, App.vue 파일만들기

Github에 저장소를 명시하고,
기본정보를 클론해 올때 사용하는 명령어
(버전내역이 삭제된 상태로 복제가 된다)

npx degit deokkeun/vue3-webpack-template  vue3-practice

vue3버전 설치하는 명령어(문법 해석 용도)

npm install vue@next

vue확장자를 가진 파일을 프로젝트 내부에서 관리하는 용도의 패키지 설치

npm install -D vue-loader@next vue-style-loader @vue/compiler-sfc

vue-style-loader

.vue확장자로 끝나는 파일들의 내부에서 style태그의
css내용을 해석해서 동작할 수 있도록 해주는 패키지

@vue/compiler-sfc

vue파일을 변환해서 웹 브라우저에서 동작할 수 있는 형태로 바꿔준다

---

webpack.config.js

// path: NodeJS에서 파일 및 디렉토리 경로 작업을 위한 전역 모듈
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  resolve: {
    extensions: ['.js', '.vue'], // 확장자
    // 경로 별칭(Alias)
    alias: { 
      '~': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    }
  },

  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './src/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    // 주석은 기본값!, `__dirname`은 현재 파일의 위치를 알려주는 NodeJS 전역 변수
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',
    clean: true
  },

  // 모듈 처리 방식을 설정
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.s?css$/,
        use: [
          // 순서 중요!
          'vue-style-loader',
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 제외할 경로
        use: [
          'babel-loader'
        ]
      }, 
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        use: 'file-loader'
      }
    ]
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: './index.html',
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    }),
    new VueLoaderPlugin()
  ],

  // 개발 서버 옵션
  devServer: {
    host: 'localhost',
    port: 8080,
    hot: true
  }
}

---

App.vue

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

<script>
// import HelloWorld from './components/HelloWorld.vue';
import HelloWorld from '~/components/HelloWorld.vue';
  export default {
    components: {
      HelloWorld
    },
    data() {
      return {
        message: 'Hello Vue!!!'
      }
    }
  }
</script>

---

main.js

개선 전

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

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

webpack.config.js에 확장자 추가

  resolve: {
    extensions: ['.js', '.vue']
  }

개선 후

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

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

---

src 폴더 내부에

assets폴더(logo.png), components폴더(HelloWorld.vue)

---

HelloWorld.vue(~assets 부분 별칭 사용)

<template>
  <img src="~assets/logo.png" alt="">
</template>

---

(개발 의존성) 특정한 파일들을 읽어서
브라우저에 출력해 줄수 있는 webpack의 loader 이다

npm i -D file-loader