webpack

webpack은 지저분하게 많은 script src를 사용하거나,
src 순서에 대해서 많은 고민들을 하지 않고자 할 때 사용한다.
하나의 bundle로써 모든 script들을 묶어주고,
이를 html에 src로 제공해주기만 하면 된다.

설치

• npm i webpack webpack-cli -D
• -D는 --save-dev와 같은 의미이다.
• pacakage.json에 추가되었는지 확인
• packing을 용이하게 하기 위하여, package.json의 scripts에 build: 'webpack'과 같이 바로 실행 가능하게 명령어를 추가하자.
  ex) npm run build => webpack이 실행된다

webpack.config.js

webpack 설정을 하는 파일.
크게 네 가지 부분을 설정.

1. mode : 개발 상태인지 배포 상태인지를 나타내는 부분이다. 개발이니까 'development' 기입함. 배포는 'production'
2. devtool : 개발은 'eval', 배포는 'hidden-source-map'으로 기입함. eval일 경우 빌드 속도가 빠르다고 한다.
3. resolve : 확장자를 처리할 수 있다. resolve에 있는 확장자는 import 할 때 확장자명 생략 가능해진다.
4. entry : 여러 script 중 대표가 되는 main 파일을 적어준다. entry 내에는 하나로 합쳐졌을 때의 파일 이름을 key 값으로 사용.
5. module : 파일들을 합치는 규칙을 적어준다. 'vue 확장자명의 내부를 실제 javascript처럼 인식한다'같은 것을 추가한다. 이 때에는 npm i vue-loader -D 와 npm i vue-template-compiler -D 필요.
   **vue-template-compiler는 vue와 같은 버전이어야 한다.** 특정 버전을 install 하고 싶을 땐, npm i vue@2.7.0 과 같은 형태로 하면 된다.
6. plugins : 사용할 플러그인을 적어준다. 모듈이 처리한 후, 플러그인들이 한번 더 가공해준다고 생각하자.
7. output : 하나로 합친 파일의 이름을 filename으로 적어준다. path에는 하나로 합친 파일이 존재하게 될 폴더 경로를 적어준다. path는 절대경로로 적어야 한다.

const path = require('path');
//절대경로를 적어줄 때 편리하게 하기 위하여 require 함.
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//.vue 파일을 읽기 위한 모듈
const Vue
const 
module.exports = {
    mode: 'development',
    devtool: 'eval',
    resolve: {
        extensions: ['.js', '.vue']
    }
    entry: {
        app: './main.js'
        //app이라는 이름으로 여러 파일들이 합쳐질 예정
        //그 중 대표되는 파일은 main.js로 정했다.
        //대표 파일 안에, 합치고자 하는 파일들을 모두 import 시킨다.
    },
    module: {
        rules: [{
            test: /\.vue$/,
            //정규표현식으로 '.vue로 끝나는 파일에 대해서는'이라는 조건을 걸어준 상태 
            loader: 'vue-loader'
            //vue-loader라는 것을 사용하여 .vue를 읽을 것이므로 npm i vue-loader 필요
        }]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'build')
    }
};

main.js

import Vue from 'vue'
import NumberBaseball from './NumberBaseball.vue';
//webpack을 사용하여 합쳐줄 파일들을 main 파일에 모두 import 시켜놔야 한다.

new Vue(NumberBaseball).$mount('#root');
// Vue instance에서 지정해준 el 역할을 한다.

.vue

• 확장자명은 .vue이지만 .js와 같게 생각하면 된다.
• vue-loader라는 모듈이 읽어준다.
• Vue component를 선언해주던 script를 대신한다고 생각하면 된다.
• react에서도 component별로 파일을 따로 만들었듯이 여기서도 마찬가지이다.

구성

1. template : 컴포넌트의 형태를 정의
2. script : data, methods 등을 정의하여 export 하기 위한 부분
3. style : template의 css 정의

ex)NumberBaseball.vue

<template>
    <div>
        <h1>{{result}}</h1>
        <form v-on:submit="onSubmitForm">
            <input ref="answer" maxlength="4" v-model="value />
            <button>입력</buton>
        </form>
        <div>시도: {{}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: '',
                result: ''
            }
        },
        methods: {
            onSubmitForm(e) {
                e.preventDefault();
            }
        }
    }
</script>