Vue.js 웹팩을 기반으로 하는 프로젝트 구성

 

프로젝트 구성 순서

 

1. 터미널에서 프로젝트를 생성할 디렉토리로 이동 (dir ,cd 활용)

2. npx degit 깃-저장소이름 폴더명

## 예시 ##
## 버전 내역이 삭제가 된 상태로 복제 ##
$ npx degit HyungJun-Yoo/webpack-bundler vue3-webpack-template

3. vscode 에서 생성한 폴더 열기 (기존 js 폴더 제거, HTML body 내용 제거)

4. 루트 경로에 src 폴더 생성, 내부에 main.js 파일 생성, App.vue 파일 생성

4-1. static 내부 image 폴더를 .src 내부로 이동 (폴더명 assets로 변경)

5. Vue 설치

$ npm i vue@next

6. Vue 패키지 설치

$ npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

# 특정한 파일들을 읽어서 브라우저에 출력해줄 수 있는 webpack의 loader #
$ npm i -D file-loader

7. webpack.config.js 수정

const path = require('path')
const HtmlPlungin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // .js, .vue 파일을 경로에서 명시하지 않아도 문제발생X
  resolve: {
    extensions: ['.js', '.vue'],
    // 경로 별칭
    alias: {
      '~': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    }
  },

  // webpack은 js를 진입점으로 사용
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './src/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    // 어떠한 경로에다가 결과물을 만들어서 내어줄지 명시 (절대경로)
    // 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$/,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        use: 'file-loader'
      }
    ]
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlungin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        // 만들어놓은 폴더의 이름을 명시
        { from: 'static'}
      ]
    }),
    new VueLoaderPlugin()
  ],

  devServer: {
    host: 'localhost'
  }
}

8. 루트 경로에 src 폴더 내부에 components 폴더 생성 (내부에는 .vue 파일)

 

 

---

 

예제