[Vue3] Vue(4) & Webpack

❗❗  데브코스 44일차 (09.30)

4일차는 Vue 강의 뿐만 아니라 라이브러리 통한 개발 과정에서

필요한 환경설정인 Webpack에 대한 강의로 이루어진다.

 

✅ Webpack

자바스크립트 기반으로 개발 규모가 커지면서 js, jsp, cjs, sass 등의 파일들과

모듈들이 많아지게 되면서 이를 관리하는 시스템이 필요해지게 된다.

Webpack은 여러개의 파일을 실제로 웹 브라우저에서 동작할 수 있도록 하나의 파일로 합쳐서 반환해주는

모듈 번들러(Module bundler)이다.

이러한 Webpack은 개발 환경에서 webpack.config.js로 생성해서 필요한 옵션을 지정해서 사용해주면 된다.

몇 가지 기본적인 예시를 보자

 

const path = require('path')

module.exports = {
  resolve: {
    extensions: ['.vue', '.js'],
    alias: {
      '~': path.resolve(__dirname, 'src')
    }
  },
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
}

 

1. require는 node.js 환경에서 사용하는 모듈이다. 외부 모듈을 가져와서 사용할 수 있다.

코드 예시에서는 path라는 경로 관련 모듈을 불러와서 사용한다.

 

2.  module.exports 객체 리터럴을 내보낸다. 지정한 여러 옵션을 내보내는 기능이다.

 

3. resolve : 모듈을 해석하는 방식을 변경할 수 있다. 

extensions : import 파일 사용시에 확장자를 생략할 수 있게 해준다.

alias : 경로 별칭을 지정해준다.

 

4. entry, output : 파일 시작점과 빌드된 결과값 위치를 지정해준다.

 

5. module : 프로젝트 내에서 다른 유형의 모듈을 처리하는 방법을 결정

 

6. 다양한 방법으로 webpack 빌드 프로세스를 사용자 정의하는 데 사용된다.

 

추가적으로 필요한 옵션이 있으면 추가해주면서 사용하면 된다.

 

 

👨‍💻 webpack을 알고 있긴 했지만, creact-react-app과 같이 개발 환경이 갖춰진 상태로만 개발을 해서 직접 다뤄 볼 일이 없었다. 그렇기에 어떤 모듈 문제나 webpack 설정을 다뤄야 할 때 해결하지 못하거나 구글링 코드로 복 붙으러 해결하기에 급급했다. 이번 기회에 webpack을 학습할 수 있었고, 앞으로 webpack 설정을 보다 수월하게 관리할 수 있을 것 같아 매우 유익한 시간이었다.

 

📖 학습한 내용

• Vue(4)
  
  • SFC 프로젝트 구성 Webpack
  • 컴포넌트 등록
  • 컴포넌트 Props
  • 컴포넌트 Non-Prop 속성
  • 컴포넌트 커스텀 이벤트
  • 컴포넌트 Slots
  • 동적 컴포넌트
  • Refs