Edited at

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

More than 1 year has passed since last update.


何ができるか

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

で黙らせた。