Я использую vue с машинописью и веб-пакетом. Мой компонент Vue очень прост и выводит только некоторые данные c для тестирования.
Мой main.ts
выглядит следующим образом:
import Vue from 'vue'
import TestComponent from './components/TestComponent.vue'
import { Dependency } from './Dependency'
var demo = new Vue({
el: '#myVueTestComponent',
components: { 'test-component': TestComponent }
})
./Dependency
вот машинопись файл в случае, если это имеет значение.
Моя конфигурация Webpack такова:
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
entry: 'main.ts,
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/i,
use: ['vue-style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['.vue', '.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'Scripts')
},
plugins: [new VueLoaderPlugin()]
}
Когда я запускаю webpack, я получаю:
ERROR in ./src/components/TestComponent.vue?vue&type=script&lang=ts& (./node_modules/ts-loader!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TestComponent.vue?vue&type=script&lang=ts&)
Module not found: Error: Can't resolve './Dependency' in 'D:\repositories\3\TEE3D\src\components'
@ ./src/components/TestComponent.vue?vue&type=script&lang=ts& (./node_modules/ts-loader!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TestComponent.vue?vue&type=script&lang=ts&) 3:0-46 21:21-33 @ ./src/components/TestComponent.vue?vue&type=script&lang=ts&
@ ./src/components/TestComponent.vue
@ ./src/main.ts
Как вы можете видеть, поиск в webpack для зависимости в папке компонентов, но это, очевидно, неправильно. Что не так в моем конфиге?