webpackのresolve.rootを使うと、Reactなどの相対パスを書く箇所などで、webpack.config.jsに設定したルートからのパスに置き換えができて編集が楽になると教えてもらいました。
早速自分のプロジェクトにも使ってみようと設定してみたらプロジェクトが動かなくなってしまいました😱
原因はwebpack2を使っていたからでした。
対処法
modulesの配列に入れる。
(vue2のサンプル)
resolve: {
modules: [
path.resolve(__dirname, "src"),
"node_modules"
],
alias: {
getters: "./src/store/getters.js",
vue: 'vue/dist/vue.js'
}
},
aliasは今まで通り動くようです。
※ここでmodulesを設定する場合、modules内にnode_modulesを設定しないとnode_modules以下を読み取ってくれませんので注意が必要です。
(modulesを設定しない場合、modules: ["node_modules"]になるようなイメージでnode_modules以下を読み取ってくれます。)
webpackに依存してしまいますが、相対パス地獄から抜け出したい場合非常に楽にコードを書くことができます。
参考
上記ページがwebpack2の変更部分をわかりやすく解説してくれています。
現在webpack2のドキュメントがなさそうなので、webpack2を取り入れたい場合、上記ページを参考にすることで解決策が見つかるかもしれません。