🧗♂️
Vue CLI 5 以上かつ Webpack 5 以上で png と svg を Data URL 化する方法
設定
これに辿りつくまでに一ヶ月かかった。
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
参照
Discussion