使用WebPack 2和Awesome-typescript-Loader分辨率和路径分辨率

Question

我想设置我的项目，所以我在下面使用以下行：

import { BlahBlahService } from '@blahblah/core/BlahBlahService';

它已解决为：

./dist/blahblah/core/blahblahservice

我已经阅读了在线资源并应用了指示设置（我也包括下面）。这在Visual Studio代码中工作；即，它没有向我显示错误，因此它可以在Tsconfig上正确阅读我的设置并理解它。我想让WebPack发生同一件事。

但是我遇到以下错误：

错误在./xxxxxxxxxxx.ts中 找不到的模块：错误：无法解决'@blahblah/core/blahblahservice'in'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

我在Web应用程序中具有以下设置：

• Angular 2版本2.2.0
• 打字稿版本2.0.8
• WebPack版本2.1.0-beta.26
• 很棒的类型载荷器版本2.2.4

我在我的tsconfig中也有以下内容：

"compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
       "@blahblah/core": ["./dist/blahblah/core"],
       "@blahblah/core/*": ["./dist/blahblah/core/*"],
    }
    ...
 }

我的webpack.js文件中有以下设置：

plugins: [
    ...
    new TsConfigPathsPlugin(),
    ...
],

Answer 1

我目前正在使用webpack@3.10和webpack-dev-server@2.9.7。
同样的问题。我在GitHub问题中找到了解决方案。

tsconfig.js：

"compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
        "~/*": ["./src"],
    }
}

webpack.config.js：

var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
resolve: {
    alias: {
        "~/": "./src"
    },
    plugins: [
        new TsConfigPathsPlugin()
    ]
}

Answer 2

我也有同样的问题。它应该起作用，但不起作用。

我的解决方法正在为package.json添加"浏览器"属性，与Tsconfig中的别名相同。

package.json

{
   "name": "app",
   ...
   "browser": {
      "@blahblah/core": ["./dist/blahblah/core"],
      "@blahblah/core/*": ["./dist/blahblah/core/*"]
   },
   "scripts": { ... },
   ...
}