webpack

경로 찾기

const path = require('path');

module.exports = {
  entry: {
      app: path.join(__dirname, 'main.js'), // __dirnam은 현재 경로 찾아줌
  },
};

 

 

webpack은 js만 읽기에 .vue파일을 읽게 하기 위해 rules에 작성필요

const path = require('path');

module.exports = {
    entry: {
        app: path.join(__dirname, 'main.js'),
    },
    module: { // 자바스크립트인 애만 읽는데 아닌 .vue같은 파일을 읽기위해 rules에 작성해줌
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
        }],
    },
};

터미널을 통해 vue-loader 설치하기

webpack관련된 것은 다 개발시에만 사용하기에 -D 붙이기!

npm i vue-loader -D

 

 

VueLoaderPlugin import하기

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

module.exports = {
    entry: {
        app: path.join(__dirname, 'main.js'),
    },
    module: { // 자바스크립트인 애만 읽는데 아닌 .vue같은 파일을 읽기위해 rules에 작성해줌
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
        }],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist'),
    },
};

 

npm i vue-template-compiler -D

🍋 여기서 node환경은 const로 가져오고 vue는 import로 가져온다는 것을 알 수 있음!

 

---

 

webpack.config.js 살펴보기

entry부터 살펴보다가 희한한것을 만났을때 module의 rules가 대신 처리해 줌(loader)

plugins은 module들이 처리한 내용들을 output나오기 이전에 한번더 가공해 줌

최종결과물로 output이 나옴

📌 entry, module, plugins, output이 핵심적인 옵션임

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

module.exports = {
    entry: {
        app: path.join(__dirname, 'main.js'),
    },
    module: { // 자바스크립트인 애만 읽는데 아닌 .vue같은 파일을 읽기위해 rules에 작성해줌
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
        }],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist'),
    },
};

 

---

 

📌 package.json
"vue"와 "vue-template-compiler"의 버전이 꼭 일치해야함
버전을 맞추기 위해 설치시 👉 npm i vue@2.6.1 이런식으로 @뒤에 버전정보 적어주기
@ 안쓰면 항상 최신버전으로 설치됨