Webpackで絶対パスを指定する

webpackのconfigでaliasを指定することで、絶対パスを使用してimportすることができるようになる

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

import UserList from 'components/UserList';

EsLint

Eslintを使用している場合、上記だけだと、以下のような警告がでる

Unable to resolve path to module 'components/UserList'. (import/no-unresolved)

どうせbuildするときに分かるし、無視してもいい気がするが、 一応以下の方法で対応できる

command line

npm install --save-dev eslint-import-resolver-webpack

eslintrc.json

{
"settings": {
    "import/resolver": "webpack"
  }
}