webpack 오류 vue-loader was used without the corresponding plugin

구글 검색 해도 오래 걸려서 .. 따로 정리 

 

webpack.config.js 설정

test: 정규표현식 : 정규표현식과 같은 파일 찾아준다.

정규표현식.test(문자)이렇게 사용하면 문자 내부에 정규표현식과 일치하는 내용 확인하는 것)
use: 'vue-loader': test를 잘 할 수 있게 vue-loader의 도움을 받는다.

 

//const VueLoaderPlugin = require('vue-loader/dist/plugin');
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path')

module.exports = {
    mode: 'development',
    //대표가 되는 파일 ( 하나로 합쳐진다 vue + js ..)
    entry:{
        app:  path.join(__dirname,'main.js')
    },
    module:{
        rules:[{
            test: /\.vue$/,
            loader: 'vue-loader',
        }],

    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    //./output/app.js 로 최종 합쳐진 js 생성
    output:{
        filename: 'app.js',
        path: path.join(__dirname,'output'),
    },

};

최종 코드 

압축된 js

app.js

0.41MB