webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve('./dist')
    },
    module: {
        rules: [
            {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
            {test:/\.css$/,use:['style.loader','css-loader']},
            {test:/\.less$/,use:['style.loader','css-loader','less-loader']},
            {test:/\.(jpg|png|gif|jpeg)/,use:'url-loader?limit=8192'},
            {test:/\.vue$/,use:'vue-loader'}

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new VueLoaderPlugin()
    ]
};

main.js

import Vue from 'vue';
import App from './App.vue';
console.log(App);
new Vue({
    render: (h)=>h(App)
}).$mount('#app');

App.vue

<template>
    <h1>
        <span>hello</span>
    </h1>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {},
        computed: {},
        components: {}
    }
</script>
<style scoped>
    span{
        color: #ff6700;
    }
</style>

運(yùn)行npm run dev報(bào)錯(cuò)如下：

ERROR in ./src/App.vue
Module not found: Error: Can't resolve 'style.loader' in 'D:\Git-vue\test-day6'
 @ ./src/App.vue 4:0-87
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@3.1.7@webpack-dev-server/client?http://localhost:8080 ./src/main.js

把App.vue文件中的style標(biāo)簽注釋掉就沒問題？是什么原因？