webpackのProvidePluginとresolve.aliasの使い分け

webpackのProvidePluginとresolve.aliasの使い分けがなんとなく分かったような気がするのでメモ。

vue.jsについて調べていた時に両方の書き方をした記事が引っかかってどっちでやったら良いか分からずモヤモヤしていた。

ProvidePlugin

new webpack.ProvidePlugin({
    Vue: ['vue/dist/vue.esm.js', 'default'],
  })

こうすると、変数として利用可能になるのでrequireやimportせずに使える。

// import Vue from 'vue'　←不要！！

new Vue({....})

resolve.alias

resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js',
        }
    }

これは、Vue.jsでES Moduleビルドを利用する時に

import Vue from 'vue/dist/vue.esm.js'

と毎度書くのが面倒なので、上記のaliasを設定すると

import Vue from 'vue'

でvue/dist/vue.esm.jsを参照したのと同じになる。

結局どう使い分けるか？

今回のVue.jsの場合はどちらもvue/dist/vue.esm.jsを気にしなくてよくなるが、ProvidePluginを利用した方がimportも都度書かなくてもよくなるのでこっちが良さそう。

aliasは自分のコンポーネントとかで

import Hoge '../../components/hoge.js'
import Fuga '../../components/fuga.js'

とかしている時に威力を発揮しそう。

[2018/11/09 追記]

resolve.aliasは外部ライブラリでVue.jsに依存している場合に必要。

ライブラリ内に import Vue from 'vue'があるとそれはVue.js2系だとvue.runtime.esm.jsになってしまうので、それではマズイ場合にresolve.aliasを指定して強制的に上書きする時に使うので、使い分けと言うよりか両方使う感じになるのかな？

webpack完全に理解した！までの道のりはまだ遠い。。。