baseUrl and paths resolution using Webpack 2 and awesome-typescript-loader
<p>I want to setup my project so where ever I use the line below:</p>

<pre><code>import { BlahBlahService } from '@blahblah/core/BlahBlahService';
</code></pre>

<p>it is resolved to:</p>

<blockquote>
  <p>./dist/blahblah/core/BlahBlahService</p>
</blockquote>

<p>I already have read through online resources and applied the instructed settings (which I also include below). This is working in Visual Studio Code; i.e. It is not showing error to me hence it is able to correctly read my settings at tsconfig and understand it. I want to make the same thing happen to Webpack.</p>

<p>However I am getting the following error:</p>

<blockquote>
  <p>ERROR in ./xxxxxxxxxxx.ts
  Module not found: Error: Can't resolve '@blahblah/core/BlahBlahService' in 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'</p>
</blockquote>

<p>I have the following setup in my web application:</p>

<ul>
<li>Angular 2 Version 2.2.0</li>
<li>Typescript Version 2.0.8</li>
<li>Webpack Version 2.1.0-beta.26 </li>
<li>awesome-typescript-loader Version 2.2.4</li>
</ul>

<p>I also have the following in my tsconfig:</p>

<pre><code>"compilerOptions": {

    ...

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

    ...

 }
</code></pre>

<p>And I have the following setting in my webpack.js file:</p>

<pre><code>plugins: [

    ...

    new TsConfigPathsPlugin(),

    ...
],
</code></pre>