본문 바로가기
Vue/webpack 기본 설정

Vue-webpack 기초 설정하기

dhsdb1541@naver.com 2020. 1. 10.

npm init(버전 확인을 위해 package.json 생성)

 

Vue를 설치 
-D 뜻 개발할떄만 이것을 쓰겠다
개발용으로 추가된 devDependencies
webpack.config.js 파일 생성하기 (웹팩에 대한 설정 입력

노드의 모듈을 만들었다

웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다 .

 

entry 하나로 합칠 파일들을 모아놓는곳 나중에 app.js로 합쳐진다(output을 통해) 

//뷰를 설치했던것을 import로 가져온다
import Vue from 'vue';

import NumberBaseball from './NumberBaseball.vue';

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

 

NumberBaseball.vue

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

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

<style>
</style>


numberBaseball.html

<html lang="en">

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

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

</html>

dist에 있는 app.js를 만들기 위해서는 app파일을 생성해준다 이를 위해서

 

package.json

build를 위해 scripts test 부분을 "build": "webpack" 으로 바꿔준다. 

그 후 npm run build 를 실행하면 

오류가 발생한다

webpack.config.js 파일을 수정해줘야한다

require을 사용해서 path를 가져온다

 

path.join(__dirname(현재경로), dist(폴더이름); path.join을 활용해서 둘의 경로를 서로 합쳐준다

const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다 .
module.exports = {
    //하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
    entry: {
        app: './main.js',
        // app:path.join(__dirname, 'main.js');
    },
    //웹팩의 핵심
    module: {
        //자바스크립트 파일들을 어떻게 처리할건지 정해둔다
        rules: [{}],
    },
    plugins: [],
    //내보낼 파일의이름
    output: {
        //filename: [name].js
        filename: '[name].js',
        //__dirname 현재 경로, dist 폴더 이름
        path: path.join(__dirname, 'dist'), //경로
    },
};

이후 npm run build를 실행하면 또 오류가 발생한다.

weppack은 자바스크립트 파일을 합쳐주는데 vue는 자바스크립트 파일이 아니기 때문에

 rules 를 수정해줘야 한다 

 

webpack.config.js

const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다 .
module.exports = {
    //하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
    entry: {
        // app: './main.js',
        app: path.join(__dirname, 'main.js'),
    },
    //웹팩의 핵심
    module: {
        //자바스크립트 파일들을 어떻게 처리할건지 정해둔다
        rules: [{
            test: /\.vue$/, //파일명이 .vue로 끝나는 파일
            loader: 'vue-loader', //vue-loader을 사용하겠다.
        }, ],
    },
    plugins: [],
    //내보낼 파일의이름
    output: {
        //filename: [name].js
        filename: '[name].js',
        //__dirname 현재 경로, dist 폴더 이름
        path: path.join(__dirname, 'dist'), //경로
    },
};

vue-loader는 install되지 않았기 때문에 다시 npm install vue-loader -D 실행 

-> 그후 npm run build를 실행하면 또 에러 발생

vue-loader plugin와 vue-template-compiler(vue와 vue-template-compiler의 버전이 일치해야한다!!!)플러그인 설치 

다시 

wepack.config.js

 

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

 

plugins에 new VueLoaderPlugin() 호출

 

mode: 개발용, 배포용 설정

devtool: eval을 쓰면 테스트용, hidden-source-map 을 쓰면 개발용

resolve를 사용하면 확장자를 제거하고 불러낼 수 있다.

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다.
// 노드환경에서는 require을 사용하고 vue환경에서는 import를 사용한다.
module.exports = {
    mode: 'development', //개발용 배포용:production
    devtool: 'eval', //테스트 배포용 : 'hidden-source-map',
    resolve: {
        extensions: ['.js', '.vue'], //확장자를 제거하고 불러낼수 있다.
    },
    //하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
    entry: {
        // app: './main.js',
        app: path.join(__dirname, 'main.js'),
    },
    //웹팩의 핵심
    module: {
        //자바스크립트 파일들을 어떻게 처리할건지 정해둔다
        rules: [{
            test: /\.vue$/, //파일명이 .vue로 끝나는 파일
            loader: 'vue-loader', //vue-loader을 사용하겠다. use: 'vue-loader'도 가능
        }, ],
    },
    plugins: [new VueLoaderPlugin()],
    //내보낼 파일의이름
    output: {
        //filename: [name].js
        filename: '[name].js',
        //__dirname 현재 경로, dist 폴더 이름
        path: path.join(__dirname, 'dist'), //경로
    },
};

그후 npm run build 실행 

생성완료(난독화되어있다)

 

 

{
    "name": "response-check",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --watch"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "vue": "^2.6.11"
    },
    "devDependencies": {
        "vue-loader": "^15.8.3",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    }
}

"build": "webpack" 에 --watch를 붙여주면 코드가 변경될때마다 자동으로 빌드를 실행해 준다.

 

.vue 파일에서 style 속성을 사용하려면 

npm i vue-style-loader -D, npm i css-loader -D 로 추가 loader을 설치후 

다시 npm run build를 실행하면된다

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다.
// 노드환경에서는 require을 사용하고 vue환경에서는 import를 사용한다.
module.exports = {
    mode: 'development', //개발용 배포용:production
    devtool: 'eval', //테스트 배포용 : 'hidden-source-map',
    resolve: {
        extensions: ['.js', '.vue'], //확장자를 제거하고 불러낼수 있다.
    },
    //하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
    entry: {
        // app: './main.js',
        app: path.join(__dirname, 'main.js'),
    },
    //웹팩의 핵심
    //loader는 javascript가 아닌 것들(vue, css등등)을 javascript로 만들어주는 역활을 한다.
    module: {
        //자바스크립트 파일들을 어떻게 처리할건지 정해둔다
        rules: [{
                test: /\.vue$/, //파일명이 .vue로 끝나는 파일
                loader: 'vue-loader', //vue-loader을 사용하겠다. use: 'vue-loader'도 가능
            },
            // 파일명이 .css로 끝나는 파일들은 해당 loader을 사용
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader'],
            },
        ],
    },
    //output이 나오기전에 추가적인 작업을 해준다
    plugins: [new VueLoaderPlugin()],
    //내보낼 파일의이름
    output: {
        //filename: [name].js
        filename: '[name].js',
        //__dirname 현재 경로, dist 폴더 이름
        path: path.join(__dirname, 'dist'), //경로
    },
};

 

npm i -D webpack-dev-server 를 설치한 후 

package.json에 "dev": "webpack-dev-server --hot" 를 실행후 localhost:8080에 접속해주면 된다

{
    "name": "response-check",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --watch",
        "dev": "webpack-dev-server --hot"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "vue": "^2.6.11"
    },
    "devDependencies": {
        "css-loader": "^3.4.2",
        "vue-loader": "^15.8.3",
        "vue-style-loader": "^4.1.2",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    }
}

 

webpack-config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
// 노드의 모듈을 만들었다
// 웹팩은 스크립트등을 너무 많이 사용해서 하나로 합치기 위해 webpack을 사용한다.
// 노드환경에서는 require을 사용하고 vue환경에서는 import를 사용한다.
module.exports = {
    mode: 'development', //개발용 배포용:production
    devtool: 'eval', //테스트 배포용 : 'hidden-source-map',
    resolve: {
        extensions: ['.js', '.vue'], //확장자를 제거하고 불러낼수 있다.
    },
    //하나로 합쳐질 파일의 이름 app (나중에 app.js로 하나로 합쳐진다 )
    entry: {
        // app: './main.js',
        app: path.join(__dirname, 'main.js'),
    },
    //웹팩의 핵심
    //loader는 javascript가 아닌 것들(vue, css등등)을 javascript로 만들어주는 역활을 한다.
    module: {
        //자바스크립트 파일들을 어떻게 처리할건지 정해둔다
        rules: [{
                test: /\.vue$/, //파일명이 .vue로 끝나는 파일
                loader: 'vue-loader', //vue-loader을 사용하겠다. use: 'vue-loader'도 가능
            },
            // 파일명이 .css로 끝나는 파일들은 해당 loader을 사용
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader'],
            },
        ],
    },
    //output이 나오기전에 추가적인 작업을 해준다
    plugins: [new VueLoaderPlugin()],
    //내보낼 파일의이름
    output: {
        //filename: [name].js
        filename: '[name].js',
        //__dirname 현재 경로, dist 폴더 이름
        path: path.join(__dirname, 'dist'), //경로
        publicPath: '/dist', //자동 서버 새로고침을 위한
    },
};

publicPath: './dist' 를 설정해주면 

 

webpack --watch의 진화판으로써 저장시 새로고침조차 자동으로 해준다 

저작자표시

티스토리툴바