【Rails5.1 Webpacker】importを絶対パスで書きたい（相対パス地獄を回避）

つらいと思っていること

• リファクタリングなどで一部の部品を別のディレクトリ階層に切り出す場合、相対パスでimportが指定されているとimportをそのままコピペしても使えない
• ディレクトリが深くなると ../../../と書くのが超めんどい

やりたいこと

以下のように自分のファイルからの相対パスじゃなく、特定のディレクトリからのパスでファイルのimportをしたい 。

app  
│─ javascript  
│   │─ common/  
│   │　  - hoge_common.jsx  
│   │─ fugaproject/  
│   │　  - fuga.jsx  
│   │─ packs/  

・fuga.jsx
// ↓こんな書き方じゃなく、
import hoge from '../common/hoge_common'
// ↓こんな書き方をしたい
import hoge from 'common/hoge_common'

解決策

config/webpacker.ymlのresolved_pathsを指定する。
これで'app/javascript'からのパスでimportを書ける。

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  resolved_paths: ['app/javascript'] # ★これを指定

おまけ

私は基本的にRubyMineを使って開発しているが、上記設定をするとコードジャンプが効かなくなって開発効率が落ちる。
RubyMineに「app/javascriptからのファイルも見てね」と知らせするために以下を設定しておくと良い。
（他のツールで開発している場合でも同様の設定を行えば良いはず）

↓ツールに読み込ませる用のファイルを作っておいて・・・

・dummy_webpack_config.js
const path = require('path');

// rubymineでコードジャンプできるようにパス指定
module.exports = {
  resolve: {
    modules: [
      path.resolve('app/javascript'),
    ],
  },
};

↓以下のようにpreferencesのLanguages & Frameworks > Javascript > Webpackに設定ファイルを指定する。 これでコードジャンプできるようになるはず。