TypeScript相对路径导入在Webpack中不起作用

法法罗

我使用相对路径在TypeScript中导入了模块。

// index.ts
import {Widget} from './components/Widget';

Webpack给我以下错误:

ERROR in ./src/index.ts
Module not found: Error: Can't resolve './components/Widget' in 
C:\project\src' @ ./src/index.ts 4:19-51

我的webpack配置文件非常基本,规则中包含ts-loader,并指向index.ts作为入口文件。

我在这里做错了什么?


附加信息:

项目文件夹结构:

c:\project
├─ src
│  ├─ index.ts
│  └─ components
│     └─ Widget.ts
├─ webpack.config.js
└─ tsconfig.json

Webpack配置:

const path = require('path');

const config = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader' }
    ]
  }
};

module.exports = config;

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist",
        "module": "commonjs",
        "target": "es6"
    },
    "include": [ "src/**/*" ],
    "exclude": [
        "node_modules"
    ]
}

版本:

webpack 3.1.0
typescript 2.4.1
ts-loader 2.2.2
法法罗

添加resolve.extensions到您的webpack.config.js。

{
    resolve: {
        extensions: ['.ts', '.js', '.json']
    }
}

当您在其中一个模块(ref)中编写无扩展名的导入文件时,webpack中的模块分辨率默认为仅搜索.js.json文件

所以当你写:

import {Widget} from './components/Widget';

Webpack默认仅搜索以下文件:

./components/Widget.js
./components/Widget.json

因此最终给出了Module not found错误。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Webpack在React中解析相对路径不起作用

文件操作在相对路径中不起作用

相对路径在Python中不起作用

图片标签的相对路径不起作用

django静态文件的相对路径不起作用

file_exists相对路径不起作用

img src根相对路径不起作用

Angular RouterLink相对路径在具有空路径的组件中不起作用

相对路径在lobgack.xml包含文件中不起作用

WPF - 我的相对路径在我的 XAML 界面中不起作用,为什么?

图像的相对路径在React应用程序中不起作用?

为什么相对路径在Ruby中不起作用要求

相对路径在Angular2组件中不起作用

Django CSS相对路径在Amazon S3中不起作用

FadeInImage.assetNetwork 需要绝对路径。占位符的相对路径不起作用。(颤抖中)

PHP require_once绝对路径与相对路径(不起作用)

从Python中的相对路径导入

从Python中的相对路径导入

Cakephp 2.x相对路径不起作用,但absulate路径正在起作用

升级到vue-cli-4后,相对路径在标准导入中不再起作用

Webpack导入,包括带有相对路径的字体

cron管道到文件的相对路径不起作用

java json模式验证相对路径不起作用(找不到URI)

PHP-使用pathinfo变量会使相对路径不起作用

C ++通过相对路径在目录外部打开文件不起作用

Angular 的较短相对路径 - Webpack 和 Typescript

为什么从 C# 运行时 python 中的相对路径不起作用,但在 C# 之外使用相同的解释器时却起作用?

根据JavaScript中的相对路径导入文件

从Python中的相对路径导入:奇怪的行为