Vue.js(Vue3-webpack-template)

Vue3-webpack-template

---

1. npm i vue@next @next를 넣어야 최신버전이 설치된다.
   vue는 개발할 때만 사용하는 것이 아니고 실제로 브라우저에서 동작하는 패키지이므로 -D 개발 의존성으로 설치하시면 안되고 일반의 존성으로 설치해야된다.

2. vue@next는 기본적인 문법을 해석할때 사용하는 것이고 .vue라는 확장자를 가지고 있는 파일을 관리하려면 추가적인 패키지를 설치해야된다.

3. npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc 패키지 설치

4. webpack.config.js파일 설정

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

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

  // 결과물(번들)을 반환하는 설정
  output: {
    // __dirname: 현재 파일이 있는 그 경로를 나타내는 하는 node.js의 전역적인 변수
    // resolve: __dirname와 dist 폴더를 합쳐서 절대적인 경로를 제공
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',

    // 구성옵션을 바꿨을 때 전에 만들어 놓은 파일이 자동으로 제거됨
    clean: true  // Clean the output directory before emit.
  },

  module: {
    rules: [{
      text: /\.vue$/,
      use: 'vue-loader'
    },
      { // .scss로 끝나는 확장자를 찾는데 s는 있을 수도 없을 수도 있다.
        test: /\.s?css$/,
        use: [
          // 순서중요!
          // vue확장자로 끝나는 파일들의 내부에서 style이라는 태그로 css 내용을 작성한 내용을
          // 해석해서 동작시켜줄 수 있도록 도와준다.
          'vue-style-loader',
          // 아래 해석된 내용을 html파일에 삽입해줌
          'style-loader',
          // js파일에서 css파일을 해석할 수 있게 도와줌
          'css-loader',
          // sass에서 해석된 내용을 postcss-loader를 통해 공급업체 접두사를 붙여준다.
          'postcss-loader',
          // css-loader보다 sass-loader가 먼저 실행되어야 한다.
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]
  },

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

  devServer: {
    host: 'localhost'
  }
}

5. 잘 연결됬는지 확인하기 위해 App.vue파일에 아래 내용 작성

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

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

6. main.js에 아래 내용 작성

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

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

7. index.html에 아래내용 작성

  <div id="app"></div>

8. npm run dev 개발 서버 열어서 확인

9. webpack.config.js파일에 아래 내용을 추가해주면 확장자를 적지 않아도 오류가 생기지 않는다.
   

  resolve: {
    // 경로에서 확장자를 따로 명시하지 않아도 오류가 안생김
    extensions: ['.js', '.vue']
  },

6번보면 main.js파일에는 import App from './App.vue'라고 적혀있지만 하단 이미지에는 확장자가 적혀있지 않다.

10. src폴더 안에 components폴더를 만들고 HelloWorld.vue 파일을 추가한다.
    파일명을 파스칼 표기법(PascalCase)으로 작성한다.

11. src폴더 안에 이미지폴더를 추가하는데 폴더명은 assets로 한다.

12. HelloWorld.vue파일에 아래 내용을 추가한다.

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

13. 특정한 파일들을 읽어서 브라우저에 출력해줄 수 있는 패키지를 설치한다.
    npm i -D file-loader

14. HelloWorld.vue파일 설정

  resolve: {
    // 경로에서 확장자를 따로 명시하지 않아도 오류가 안생김
    extensions: ['.js', '.vue'],
    // 경로별칭(Alias): ./이나 ../로 시작하는 경로를 별칭 ~ 로 만들어서 사용한다.
    elias: {
      '~': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    }
  },

      { // png|jpe?g|gif|webp 확장가를 가진 파일들이 있으면 
        // 브라우저에서 동작시킬 수 있도록 도와줌
        test: /\.(png|jpe?g|gif|webp)$/,
        use: [
          'file-loader'
        ]
      }

15. App.vue파일에 HelloWorld.vue파일을 불러온다.

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

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

16. npm run dev 개발 서버 열어서 확인