Best way to have absolute imports with Webpack 2?

I'm in the process of setting up a Webpack configuration for a React project and I want to be able to import my components like this:

import ComponentName from "components/ComponentName"

instead of like this:

import ComponentName from "../../components/ComponentName"

(this all would be assuming that my components directory lives inside a src directory)

Doing a little bit of research, so far I've found two different methods to achieve this using Webpack:

1. Making Webpack resolve modules inside my src directory using the resolve.modules option like this:

   
       resolve: {
         modules: [ path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules")]
       }
   
   

2. Using the Alias option to name my components directory as an alias:

   
       resolve: {
         alias: {
           components: path.resolve(__dirname, 'src/components/'),
          }
       }
   
   

So, my question is, is there any advantage of using one particular method over the other ?

Thanks in advance