绝对路径在 webpack 2 中不起作用

Question

我一直在尝试在我的 angular 2 项目中使用 webpack 2 获得绝对路径。我使用 this 作为样板代码。为了让它与绝对路径一起工作，我在 webpack.config.ts 中尝试了以下操作：

config.resolve = {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('./src'), 'node_modules']
  };

在webpack.d.ts中：

resolve?: {
    extensions?: Array<string>;
    modules?: Array<string>;
  };

但是当我尝试 import {AppComponent} from 'app/app.component' 时它不起作用，它会出错 Cannot find module 'app/app.component'... 我不知道是什么原因造成的。请帮忙

P.S。我还尝试了建议的解决方案 here。但是无法让它工作。

编辑 1

请找到我的尝试来完成这项工作 here、https://github.com/dsasidhar/angular-webpack2-starter

Answer 1

您可以将 path.join 与 __dirname 变量一起使用

config.resolve = {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.join(__dirname, 'src') , 'node_modules']
  };

注：

path.resolve(__dirname, 'src') 也可以

Answer 2

Webpack Typescript 加载器根据 tsconfig 解析模块路径。所以你必须将这一行添加到你的 tsconfig.json 文件中：

"baseUrl": "./src" // Or whatever is your root

如果 src 文件夹中有一个 tsconfig.app.json，您还应该在那里指定一个 baseUrl。我建议不要有超过一个 tsconfig 文件，因为工具对此的支持不是很好。

有关 Typescript 模块解析的更多信息 here。查看基础 URL 和路径映射部分。

Absolute path doesn't work in webpack 2