Vue.js v-for

2019-11-18

Webpack

webpack: 설명웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다.

npm init
npm install vue
npm install webpack webpack-cli -D
npm i vue-loader -D
npm i vue-template-compiler -D

vue와 vue compiler는 반드시 버전이 일치해야 하므로 package.json으로 모듈을 관리한다.

package.json

  "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.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path'); // 노드에서 제공하는 모듈

module.exports = {
  entry: {
      app: path.join(__dirname,'main.js'),
  },
  module: {
      rules: [{
        test:/\.vue$/,
        use: 'vue-loader',
      }],
  },
  plugins: [
      new VueLoaderPlugin(),
  ],

  output: {
      filename: '[name].js',
      path: path.join(__dirname, 'dist'),  //'./dist', 절대경로 필요하므로 path.join
  },
};

웹팩은 기본적으로 js만 처리하는데 rule에 vue-loader를 추가해 vue 파일을 처리한다.

또 entry와 output을 보면 .vue와 main.js를 합쳐 output을 ./dist 경로의 app.js 파일로 저장함을 볼 수 있다.

.vue

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

main.js

import Vue from 'vue';
import nb from './nb.vue';

new Vue(nb).$mount('#root');

webpack을 사용하는 이유 중 하나는 html에서 한없이 길어지는 script 부분을 따로 관리하기 위해서이다.

기존의 component와 인스턴스를 .vue와 main.js로 옮김으로 html을 간결하게 유지한다.

package.json

  "scripts": {
    "build": "webpack"
  },

package.json의 script 부분에 “build”: “webpack”을 추가한다.

npm run build

빌드를 실행하면 .vue와 main.js가 ./dist 경로에 app.js로 저장되어 html에선 app.js만으로 미리 설정한 컴포넌트와 인스턴스를 활용할 수 있다.

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

 Vue.js Component Vue.js v-for 