vue文件中html标签不能解析,webpack+vue-loader不能解析vue文件中的style标签

问题：webpack+vue-loader不能解析vue文件中的style标签。去掉style标签或者内联样式就是可以的

vue文件：

<template>

<div class="example">{{ msg }}</div>

</template>

<script>

export default {

data () {

return {

msg: 'Hello world!'

}

}

}

</script>

<style>

.example {

color: red;

}

</style>

webpack.config.js配置文件

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {

entry: {

item: "./src/item.js",

},

devtool: 'source-map',

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, 'dist')

},

module: {

rules: [

{

test: /\.vue$/,

use: ['vue-loader']

},

// 它会应用到普通的 `.js` 文件

// 以及 `.vue` 文件中的 `<script>` 块

/*{

test: /\.js$/,

loader: 'babel-loader'

},

// 它会应用到普通的 `.css` 文件

// 以及 `.vue` 文件中的 `<style>` 块

{

test: /\.css$/,

use: [

'vue-style-loader',

'css-loader'

]

}*/

]

},

resolve: {

alias: {

// 修改Vue倍导入时包的路径

"vue$": "vue/dist/vue.js",

public: path.resolve(__dirname, 'public'),

}

},

plugins: [

new VueLoaderPlugin(),

new HtmlWebpackPlugin({

template: './src/template/item.html',

filename:'item.html',

chunks: ['item']

})

]

};

package.json vue+vue-loader版本

{

"name": "my-vue",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo "Error: no test specified" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"@babel/core": "^7.5.5",

"babel-loader": "^8.0.6",

"css-loader": "^3.1.0",

"html-webpack-plugin": "^3.2.0",

"style-loader": "^0.23.1",

"vue": "^2.6.10",

"vue-loader": "^15.7.1",

"vue-template-compiler": "^2.6.10",

"webpack": "^4.36.1",

"webpack-cli": "^3.3.6"

}

}

最后错误描述