title: How do I create a webpack import alias in React Static Boilerplate?
body: <p>I have the following <code>import</code>:</p>
  
  <pre><code>// cwd: /project/pages/blog/category/red/index.js
  
  import PageHeader from '../../../components/PageHeader';
  </code></pre>
  
  <p>And I want to be able to write it this way (anywhere in my project):</p>
  
  <pre><code>// cwd: /project/pages/blog/category/red/index.js
  
  import PageHeader from 'components/PageHeader';
  </code></pre>
  
  <p>I've tried using webpack <code>resolve</code> <a href="https://webpack.github.io/docs/configuration.html#resolve" rel="nofollow">option</a> but I can't seem to make it work:</p>
  
  <pre><code>config.resolve = {
    alias: {
      components: [
        path.resolve('../components/')
      ]
    }
  };
  </code></pre>
  
  <p>and</p>
  
  <pre><code>config.resolve = {
    root: [
      path.resolve('../')
    ]
  };
  </code></pre>
  
  <p>Am I missing something ?</p>
  
  <p>My app architecture is forked from <a href="https://github.com/koistya/react-static-boilerplate" rel="nofollow">React Static Boilerplate</a>, so my webpack.config.js looks like <a href="https://github.com/koistya/react-static-boilerplate/blob/master/tools/webpack.config.js" rel="nofollow">this one</a></p>