Jak zwykle powraca problem z konfiguracją webpacka, mam proste zadanie wczytać komponent vue z osobnego pliku i tradycyjnie webpack nie może rozpoznać ścieżki. Nie wiem co ja mam zrobić aby wreszcie skumał skąd ma pobierać plik. Plik webpack.config.js :
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
module.exports = {
context : __dirname,
entry: {
index : "/resources/js/index.ts",
main : "/resources/scss/main.scss"},
watch : true,
output: {
path: path.resolve(__dirname),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.scss$/,
use: "sass-loader"
}
]
},
resolve: {
alias: {
'@vuecomponents' : path.resolve(__dirname,'resources/js/components'),
},
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
},
plugins: [
new VueLoaderPlugin()
]
}
Jest oczywiście w folderze głównym projektu. Struktura katalogu wygląda tak :
folder główny -> resources-> js -> components -> index.ts (plik TypeScript'owy)
Kod wewnątrz pliku :
import Vue from 'vue';
import Navbar from '@vuecomponents/navbar.vue';
Vue.component(Navbar, 'navbar');
I twierdzi, że nie może znaleźć '@vuecomponents/navbar.vue' . Co tu się nie zgadza? Skończyły mi się pomysły, kombinował na 30 sposobów i cokolwiek bym nie zrobił, on dalej się upiera, że nie widzi tego pliku. Czy muszę najpierw poświęcić rok nauki aby zrozumieć filozofię odnajdywania ścieżek do modułów? Znowu 4 godziny w plecy przez jakąś pierdołę.