I am currently in the process of learning how to use webpack2 with vue.js and babel. However, I've encountered an error that I can't seem to resolve. I'm not sure what exactly is missing.
ERROR in ./src/main.js
Module not found: Error: Can't resolve './app/index.vue' in 'E:\xampp\htdocs\webpack-practice\src'
@ ./src/main.js 3:0-43
It appears that the error stems from the line where I am trying to import a Vue component.
// File src\main.js
import Vue from 'vue'
import AppComponent from './app/index.vue'
const vm = new Vue({
el: '#app',
components: {
app: AppComponent,
},
render: h => h('app'),
})
This is my configuration file:
// File webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './src/main',
output: {
path: './build',
filename: 'main.js',
},
module: {
rules: [
{
test: /\.vue$/,
use: {
loader: 'vue'
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
vue: {
loader: {
js: 'babel-loader'
}
}
})
]
}
I'm confident that the import path is correct; here is my folder structure. I have also added the './' prefix before the folder name.
root
|----index.html
|----webpack.config.js
|----app
| |----index.vue
| |----some file
|
|----build
| |----main.js
|
|----node_modules
|
|----src
|----main.js
What could I be missing here? Any assistance would be greatly appreciated. I am using Windows 10 if that information is relevant.