problem description
Module not found: Error: Can"t resolve". / components/Testc.vue"
the environmental background of the problems and what methods you have tried
use webpack+vue for the first time
related codes
/ / Please paste the code text below (do not replace the code with pictures)
webpack.config.js:
// nodejs path
var path = require("path");
const VueLoaderPlugin=require("vue-loader/lib/plugin");
module.exports = {
// path.resolve()index.js
entry: path.resolve(__dirname,"./index.js"),
//
output: {
// myProject/output/static
path: path.resolve(__dirname,"./output"),
filename: "bundle.js"
},
resolve: {
extensions: ["*", ".js", ".vue"]
},
plugins:[
new VueLoaderPlugin()
],
module: {
rules: [
// vue-loader .vue
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}
]
}
};package.json
{
"devDependencies": {
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"babel-loader": "^8.0.4",
"css-loader": "^2.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"vue": "^2.5.21",
"vue-loader": "^15.4.2",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-serve": "^2.0.3"
}
}
index.js:
/**
*
* @authors Your Name (you@example.org)
* @date 2018-12-12 10:33:23
* @version $Id$
*/
import Vue from "Vue"
import Testc from "./components/Testc.vue"
new Vue({
el:"body",
components:{
Testc
}
})
Testc:
<template>
<div v-for="n in 10">div</div>
</template>
<script>
export default{
date(){
return{
msg:"hello world"
}
}
}
</script>
<style>
html{
background:red;
}
</style>run npx webpack-cli and report an error
what result do you expect? What is the error message actually seen?
Module not found: Error: Can"t resolve". / components/Testc.vue"