webpack编译报错Module parse failed: Unexpected token

webpack编译报错Module parse failed: Unexpected token

问题描述：
webpack编译vue文件，一直报错 Module parse failed: Unexpected token (1:0)

ERROR in ./src/app.vue 3:0
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
|
|

<template>
| <div class="example">{{ msg }}</div>
| </template>
@ ./src/index.js 4:0-28 8:18-21

解决办法：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exprots = {
	mode: 'development',
	entry: path.join(__dirname, "src/index.js"),
	output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: "bundle.js",
	},
	module: {
	    rules: [
	        {
	            test: /\.vue$/,
	            loader: 'vue-loader',
	            exclude: file => (
	                /node_modules/.test(file) &&
	                !/\.vue\.js/.test(file)
	            )
	        },
	        {
	            test: /\.js$/,
	            loader: 'babel-loader'
	        },
	        {
	            test: /\.css$/,
	            loader: "style-loader!css-loader"
	        }
	    ]
	},
	plugins: [
	    new VueLoaderPlugin()
	]
}

添加 new VueLoaderPlugin() 我的问题就解决了！

参考文章