[Vue.js] SVG読み込みにおいて、vue-svg-loaderとfile-loaderを使い分ける その2

mayatasomayataso

https://coneta.jp/article/show/2882
の続き

ただ、vue-svg-loaderを用いた読み込みとfile-loaderでimg等で読み込むパターンを併用したい場合、公式のリファレンスだと足りず少しWebpack設定をいじる必要がある。

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule
      .oneOf('component')
      .resourceQuery(/component/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .end()
      .end()
    svgRule.oneOf('normal').uses.merge(svgRule.uses.entries())
    svgRule.uses.clear()
  },
};

WebpackのoneOfを使うことで、特定のパターンの時に使うloaderを指定することができる。

上記の設定だと、デフォルトはfile-loaderで読み込み、

@/assets/images/image.svg?component
といったようにクエリを指定することでvue-svg-loaderとして読み込むことができる。