[vue] 웹팩 사용하기

해당 포스팅은 인프런 웹 게임을 만들며 배우는 Vue 강의를 참고하여 작성하였습니다.

https://www.inflearn.com/course/web-game-vue

[무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의

해당 포스팅은 vue3 기준으로 작성되어 강의 내용과 상이한 부분이 있습니다!

 

🎯 스크립트 관리하기가 힘들어 질때 webpack를 설치

==> npm으로 패키지 관리를 함

---

📌 사전 설치 목록

• node.js
• npm (node.js 설치 시 자동으로 설치됨)

npm이란?
Node Package Manager의 약자로 nodejs의 모듈 관리를 하기 위해 사용

package.json이란?
npm을 통해 설치된 패키지 목록을 관리하고 프로젝트의 정보 및 기타 실행 스크립트를 작성하는 파일
=> 버전관리하기 위해 작성은 필수!

---

package.json 생성

# npm init: package.json 생성
$ npm init

그냥 쭉 엔터치고 yes 입력하면 된다.

그러면 프로젝트 하위에 package.json이 생성됨

 

vue 설치

#vue 설치
$ npm install vue
# 또는 $ npm i vue

하면 프로젝트 하위에 package.json이 생성된다.

이제 npm으로 패키지 관리를 할 것!

 

=> git 등에 업로드할 때 굳이 node_modules 까지는 업로드 하지 않고 package.json에 라이브러리만 기재해 놓아도

npm install 을 통해 한번에 다운로드할 수 있다.

 

webpack 과 webpack-cli 설치

# -D 옵션은 개발할 때만 webpack과 webpack-cli를 사용하겠다는 의미
$ npm i webpack webpack-cli -D
# $ npm i webpack webpack-cli --save-dev

* webpack webpack-cli은 개발할 때만 필요하므로 -D 옵션을 주어 설치

(배포할 때는 필요하지 않다)

하면 package.json 파일이 변경된 것을 볼 수 있다.

{
  "name": "baseball",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

 

Vue-loader 설치

$ npm i vue-loader -D

 

webpack.config.js 파일 작성

webpack.config.js : 웹팩 설정하는 파일(따로 만들어 줘야 함.)

// vue-loader를 사용하기 위한 준비
const { VueLoaderPlugin } = require('vue-loader')
// node가 만들어준 스크립트 활용
const path = require('path');

// node의 module 제작
// 웹팩이 모듈로 만든 객체를 사용
// 스크립트를 하나로 합칠 파일이 필요
// 가장 대표가 되는 파일이 entry임
// entry의 app은 하나로 합쳐질 파일
module.exports = {
    mode: 'development',
    // 개발할때는 eval
    // 배포할 때는 hidden-source-map
    devtool: 'eval',
    resolve: {
        // 확장자 처리
        // 여기 넣어주면 main.js에 import 시에 확장자를 제거할 수 있다
        extensions: ['.js', '.vue']
    },
    entry: {
        // 현재 폴더 안에 들어있는 main.js 찾아서 dir 합침
        app: path.join(__dirname, 'main.js')
    },
    // entry부터 처리하다가 이상한 걸 만나면 module의 rules부터 처리
    module: {
        // 파일명에 .vue가 들어가면 vue-loader가 처리를 한다.
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
        }],
    },
    // output 나오기 전에 plugin으로 가공
    plugins: [
        // vue-loader를 사용하기 위한 준비
        new VueLoaderPlugin(),
    ],
    // 최종 결과물
    output: {
        //filename: 'app.js'
        //[name]이라고 하면 알아서 app.js를 명함
        filename: '[name].js',
        //폴더경로
        path: path.join(__dirname, 'dist'),
        // 정리하자면 dist라는 폴더가 생성될 것이고, app.js로 최종 결과물이 생성될 것
    },
};

https://www.w3schools.com/nodejs/met_path_join.asp

Node.js path.join() Method

node.js에서 제공하는 Path 모듈은 파일과 디렉토리 경로 작업을 위한 유틸리티를 제공한다.
여기서 사용한  path.join은 String을 주게 되면 플랫폼별(windows냐 mac이냐) 구분자를 사용해서 경로를 정규화해서 리턴해준다.

아마 본 강의대로 

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

라고 불러온다면 error: Cannot find module 'vue-loader/lib/plugin' 라는 에러메세지가 뜰 것인데,
해당 문제는 구버전의 VueLoaderPlugin와 신버전의 VueLoaderPlugin의 import 방법이 바뀌었기 때문에
위와 같이 import 해야 한다.

요 부분은 원래는 main.js에서 

import Numberbaseball from './NumberBaseball.vue';

같은 부분을

import Numberbaseball from './NumberBaseball';​

로 치환 할 수 있다

 

main.js 작성

//vue2버전
//import Vue from 'vue';

//vue3버전
import { createApp } from 'vue'
import Numberbaseball from './NumberBaseball.vue';

//vue2버전
//new Vue(Numberbaseball).$mount('#root');

//vue3버전
createApp(Numberbaseball).mount("#root");

NumberBaseball.vue 작성

<template>
    <div>
        <h1>{{ result }}</h1>
        <form @submit="onSubmitForm">
            <input ref="answer" maxlength="4" v-model="value" />
            <button type="submit">입력</button>
        </form>
        <div>시도: {{ }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tries: [],
            value: '',
            result: '',
        }
    },
    methods: {
        onSubmitForm(e) {
            e.preventDefault();
        }
    }
};
</script>

NumberBaseball.html 파일 작성

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>숫자야구</title>
</head>

<body>
    <div id="root"></div>
    <script src='./dist/app.js'></script>
</body>

</html>

 

스크립트로 웹팩이 최종으로 만들어줄 app.js를 불러오면 된다.

 

파일구조

 

build

package.json 파일 수정

script에 명령어 한줄만 입력하면 된다@

# build
# $ npm run webpack
$ npm run build

여기까지 따라왔으면..현재 기준 vue 3.2.45 버전을 사용하고 있는데

vue-template-compiler와 버전 충돌이 나서 오류가 발생할 것이다!

=> 🌟 vue-template-compiler과 vue 버전은 반드시 동일해야 한다. 🌟

=> vue3 버전 이상에서는 지원안해줌...
따라서 vue2가 아닌 이상 vue를 다운그레이드 해서 다운 받던가, 다른 방법 사용해야함

 

💥 그런 경우의 troubleshooting 💥

https://stackoverflow.com/questions/67966529/vue-3-package-version-mismatch

Vue 3 package version mismatch

# vue-template-compiler 삭제
$ npm uninstall vue-template-compiler

# vue-template-compiler를 대체하는 compiler-sfc를 설치
$ npm i -D @vue/compiler-sfc

 package.json에 vue-template-compiler가 없고 vue/compiler-cfs가 표시되는지 확인

{
  "name": "baseball",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.45",
    "vue-loader": "^17.0.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

해서 다시 npm run build 해보면~

아주 잘 되는 것을 볼 수 있다~

dist 폴더에 컴파일된 app.js도 존재한다.

 

이제 html 파일을 열어보면

잘 뜨는 걸 볼 수 있다~