🧗‍♂️

Vue CLI 5 以上かつ Webpack 5 以上で png と svg を Data URL 化する方法

2023/03/18に公開

設定

これに辿りつくまでに一ヶ月かかった。

vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule("images")
      .set("parser", {
        dataUrlCondition: {
          maxSize: Infinity,
        },
      })
    config.module
      .rule("svg")
      .set("type", "asset")
      .set("parser", {
        dataUrlCondition: {
          maxSize: Infinity,
        },
      })
  },
}

Webpack 5 で置き換わった Asset Modules という仕組みを知らず、また、どのバージョンの Webpack を使用しているかも把握できておらず、ずっと url-loader と格闘していたことがはまった原因だった。

vue-cli 側で提供された設定をオーバーライドする形で実施していたため、問題をより複雑にしていたのもある。

バージョン確認方法

$ vue -V
@vue/cli 5.0.8

$ npm v @vue/cli-service dependencies | grep webpack:
  webpack: '^5.54.0',

vue.config.js の設定内容の確認方法

vue inspect --rule images
vue inspect --rule svg

参照

https://stackoverflow.com/a/72884020/9944769
https://www.boohere.com/detail/10339123.html
https://stackoverflow.com/questions/42991089/disable-vue-cli-webpack-encoding-image-base64
https://zenn.dev/antez/articles/638382faa06bd7#css内の画像をバンドル
https://webpack.js.org/guides/asset-modules/
https://webpack.js.org/configuration/module/#ruleparserdataurlcondition

Discussion