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>
运行npm run dev报错如下:
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标签注释掉就没问题?是什么原因?
报错说的比较明显,找不到模块,要看看是不是没装。其次你是不是写错了 应该是style-loader吧
ERROR in ./src/App.vue
Module not found: Error: Can't resolve 'style.loader' in 'D:Git-vuetest-day6'
@ ./src/App.vue 4:0-87
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.7@webpack-d