webpack5 已经废弃了url-loader
webpack5自带的asset-module就可以实现以前的功能
asset-module整合了原本的url-loader、file-loader、raw-loader
通过type属性设置使用对应之前loader的功能
type: "asset/resource"
---将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
type: "asset/inline"
---将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.
type: "asset/source"
---将资源导出为源码（source code）. 之前的 raw-loader 功能.
type: "asset"
---自动选择导出为单独文件或者 dataURL形式（默认为8KB）
---之前有url-loader设置asset size limit 限制实现。
{
test: /\.(svg)$/,
type: "asset/source",
generator: {
// 打包到 dist/image 文件下
filename: "images/[contenthash][ext][query]",
},
},
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
// 转base64的条件
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
},
},
generator: {
filename: "images/[contenthash][ext][query]",
},
}
测试使用
<template>
<div class="box">
<h1>我是App哈哈哈哈</h1>
<div id="svg"></div>
</div>
</template>
<script>
import svgContent from "./icons/svg/chart.svg";
export default {
mounted() {
window.document.getElementById("svg").innerHTML = svgContent;
},
};
</script>
<style lang="scss">
.box {
width: 500px;
height: 200px;
color: orange;
// background-color: #000;
}
</style>
效果↓↓↓
image.png
假如上面svg type改为asset，他会把我刚刚的svg转base64
因为默认8k以下就转，
也可以手动配置，parser里的dataUrlCondition即可设置
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
// parser: {
// // 转base64的条件
// dataUrlCondition: {
// maxSize: 25 * 1024, // 25kb
// },
// },
generator: {
// 打包到 dist/image 文件下
filename: "images/[contenthash][ext][query]",
},
},
效果↓↓↓
image.png
