绝对路径在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

如果tsconfig.app.json文件夹中有src，则还应在其中指定baseUrl。我建议不要有多个tsconfig文件，因为工具支持不是很好。

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