LoginSignup
13

More than 5 years have passed since last update.

webpack2でresolve.rootが使えなくなった

Last updated at Posted at 2016-11-01

webpackのresolve.rootを使うと、Reactなどの相対パスを書く箇所などで、webpack.config.jsに設定したルートからのパスに置き換えができて編集が楽になると教えてもらいました。
早速自分のプロジェクトにも使ってみようと設定してみたらプロジェクトが動かなくなってしまいました😱
原因はwebpack2を使っていたからでした。

対処法

modulesの配列に入れる。
(vue2のサンプル)

webpack.config.js
  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に依存してしまいますが、相対パス地獄から抜け出したい場合非常に楽にコードを書くことができます。

参考

What's new in webpack 2

上記ページがwebpack2の変更部分をわかりやすく解説してくれています。
現在webpack2のドキュメントがなさそうなので、webpack2を取り入れたい場合、上記ページを参考にすることで解決策が見つかるかもしれません。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13