webpackでrequireやimportのパスのrootを指定する

何ができるか

var Hoge = require("./Hoge.jsx");
import Fuga from "./common/Fuga.jsx";

って書いてたのを

var Hoge = require("Hoge.jsx");
import Fuga from "common/Fuga.jsx";

って書けるようになる

やり方

var path = require('path');

module.exports = {
  //....
  resolve: { root: [ path.resolve('./front') ] }, // rootにしたいパスを指定
  //....
};

本家サイト

何が幸せか

ディレクトリをリファクタリングしたくなった時に、「呼び出しファイルからの相対パス」で記述していると、リファクタリングが面倒になる。
これやっといてルートからの相対パスで書いておけば一括置換できる。

弊害

hyperclick

atomでjsでimportしたファイルにジャンプする
にも書いたけど、hyperclickで辿れなくなる。解決策はatomでjsでimportしたファイルにジャンプするに書いてある。キモいけど。

神修正により問題なし
https://github.com/AsaAyers/js-hyperclick/pull/32

eslint-plugin-import

に怒られる。でもこいつなくても、どうせビルドでめっちゃ怒られるから、

.eslintrc

rules:
  semi: 0
  import/no-unresolved: 0

で黙らせた。