title: React Webpack 4 Resolve Alias
body: <p>I'm having difficulty getting resolve alias to work in my React app using WebPack, and everything I've tried from google results don't seem to make a difference.</p>
  
  <p>Here is my resolve from webpack.</p>
  
  <p>C:\website\webpack.config.js</p>
  
  <pre><code>resolve: {
      extensions: ['*', '.js', '.jsx'],
      alias: {
          apiAlias: path.resolve(__dirname, '/app/services/api/')
      }
  }
  </code></pre>
  
  <p>Here is C:\website\app\components\Accounts\Accounts.js</p>
  
  <pre><code>import ApiAccounts from '/apiAlias/ApiAccounts.js';
  </code></pre>
  
  <p>and I have a file located in C:\website\app\services\api\ApiAccounts.js
  Changing the above line to the below works:</p>
  
  <pre><code>import ApiAccounts from '../../services/api/ApiAccounts.js';
  </code></pre>
  
  <p>For fullness, here are my webpack dependencies:</p>
  
  <pre><code>"devDependencies": {
      "html-webpack-plugin": "^3.2.0",
      "webpack": "^4.12.0",
      "webpack-cli": "^3.0.3",
      "webpack-dev-server": "^3.1.4"
   }
  </code></pre>
  
  <p>and yet I keep getting the error of </p>
  
  <blockquote>
    <p>ERROR in ./app/components/Accounts/Accounts.js
    Module not found: Error: Can't resolve '/apiAlias/ApiAccounts.js' in 'C:\website\app\components\Accounts'</p>
  </blockquote>
  
  <p>Can anyone see anything obvious as to what I'm missing, or should try to try and get this working, or even if there is a way to debug webpack to see what path it is actually using if the alias is actually kicking in?</p>
  
  <p>Thanks!</p>