Vue.js : Webpack 설정하기 : [강좌 3-3강 정리]

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다.

 

설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~

 

사이트 주소 : https://www.inflearn.com/course/web-game-vue/#

 

 

Webpack을 이용하여 npm과 webpack을 통해 Vue 인스턴스를 사용하기 위한 기본 구조를 잡는 방법을 알아봅니다.

NPM 패키지 모듈 설정하기

• webpack 설정을 위해 webpack, webpack-cli, vue-loader, vue-template-compiler에 대한 npm install을 진행합니다.
• package.json을 보면 다음과 같습니다.
• 추가적으로 vue-template-comfiler의 버전와 vue의 버전은 항상 일치 시켜야 합니다.

{
  "name": "number-baseball",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "vue-loader": "^15.7.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

 

 

Webpack.Config.Json 파일 설정하기

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    app: path.join(__dirname, 'main.js')
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
    }],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
  },
};

• mode
  • development 모드를 선언합니다.
• entry
  • 현재 디렉토리의 main.js라는 파일을 기준으로 번들링 작업을 수행합니다.
• module 
  • .vue(확장자)로 끝나는 모든 파일을 경로에서 탐색한뒤 Bundling합니다.
    • test : /\는 시작 $/는 끝을 의미합니다. 
    • loader: vue-loader를 사용하겠다고 선언합니다. vue-loader는 npm으로 앞에서 다운받은 모듈을 의미합니다.
    • vue-loader는 vue의 component를 일반적인 자바스크립트 모듈로 변환할 수 있도록해주는 webpack loader입니다.
• plugin 
  • Vue Loader를 사용하기 위해 추가적으로 VueLoaderPlugin을 명시해주어야 한다. (vue-loader 15버전 이상부터)
  • 추가적으로 plugin과 loader의 차이는 다음과 같습니다.
    • plugin : 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리합니다. (즉 vue컴포넌트 파일을 번들링)
    • loader : 번들링된 결과물의 형태를 바꾸는 역활을 합니다. 즉 번들링된 파일을 압축하거나, 파일 복사, 추출 등 부가작업을 하거나 파일별 커스텀 기능을 위해 사용합니다.
  • output
    • 결과로 번들링된 파일의 이름과 해당 번들링 파일이 저장될 경로
    • entry에서 선언한 key의 이름이 [name]에 들어갑니다.
    • 즉 webpack을 수행하면 app.js라는 파일이 dist/ 폴더 안에 생깁니다.

 

 

webpack 설정시 발생할수 있는 에러 해결

 

webpack을 이용하여 vue를 구성할때 아래와 같은 에러를 만날수 있는데 각각 해결방법은 다음과 같습니다.

 

1. 아래와 같은 에러 발생시에는 vue-template-compiler를 설치하여 줍니다.

/* Vue-Template-Comfiler를 설치하라 */
ERROR in ./NumberBaseball.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
 @ ./main.js 2:0-50

 

 

2. 아래와 같은 에러 발생시에는 VueLoaderPlugin을 webpack.config.js의 plugin으로 등록하여 줍니다. (vue-loader안에 존재)

 

/* VueLoaderPlugin을 webpack.config.js 안에 넣어라 */
ERROR in ./NumberBaseball.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.