BaseUrl and path resolution with Webpack 2 and awesome-w870> -loader

Question

I want to set up my project so that someday use the following line:

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

allowed:

./distance/blahblah/kernel / BlahBlahService

I already read online resources and applied the given settings (which I also included below). This works in Visual Studio Code; those. it does not show me an error, so it can correctly read my settings in tsconfig and understand it. I want to do the same with Webpack.

However, I get the following error:

A mistake in. /xxxxxxxxxxx.ts Module not found: Error: cannot resolve '@ blahblah / core / BlahBlahService' to 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'

I have the following setting in my web application:

• Angular 2 Version 2.2.0
• Typescript Version 2.0.8
• Webpack Version 2.1.0-beta.26
• awesome- typescript -loader 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

. , .

"browser" package.json , tsconfig.

package.json

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