パパエンジニアのアウトプット帳

30歳に突入した1児のパパエンジニアのブログ

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'

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


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