webpack资源模块1、asset resource ，⽣成单独的⽂件，并导出url，会在dist⽂件夹中出现在index.js 中引⼊图⽚
svg文件怎么生成在 fig.js⽂件中添加配置
module: {
rules: [
{
test: /\.png$/,
type: 'asset/resource'
}
]
}
终端执⾏：npx webpack，⽣成dist⽂件夹
执⾏：npx webpack-dev-server，打开地址，图⽚加载进来了
⾃定义命名dist⽂件夹⾥⾯的图⽚⽂件夹名称，有两种⽅法
第⼀种：可以在 output ⾥⾯进⾏配置
// 出⼝⽂件
output: {
// 设置资源模块⽂件名
assetModuleFilename: 'images/[contenthash][ext]'
}
contenthash：表⽰根据⽂件内容⽣成⼀个哈希的字符串
ext：扩展名，代表使⽤的是原资源的扩展名
第⼆种：在module --> rules⾥⾯配置：
module: {
rules: [
{
test: /\.png$/,
// 资源类型
type: 'asset/resource',
// ⾃定义图⽚⽂件夹名称
generator: {
filename: 'images/[contenthash][ext]'
}
}
]
}
如果两种⽅法同时设置了，generator 的优先级要⾼于 output
此时执⾏ npx webpack，dist ⽂件夹内⽣成了⼀个名叫 images的⽂件夹，⾥⾯有图⽚2、asset inline，⽤于导出⼀个资源的 Data URL，不会在dist⽂件夹中出现
import logoSvg from './assets/wx-logo.svg'
const img2 = ateElement('img')
img2.style .cssText = 'width: 600px; height: 200px' img2.src = logoSvg
document.body.appendChild(img2)
3、asset source ⽤于导出资源的源代码，不会在dist⽂件夹中出现
4、通⽤资源类型 asset，在导出⼀个 Data URL 和发送⼀个单独的⽂件之间⾃动选择，会在dist⽂件夹中出现
修改配置⽂件
module: {
rules: {
test: /.\jpg$/,
type: 'asset'
}
}
现在，webpack会按照默认条件，⾃动的在 resource 和 inline 之间进⾏选择，⼩于 8kb的⽂件，将会视为 inline 模块类型，否则会被视为 resource 模块类型
可以通过在 webpack 配置的 module rules层级中，设置 Rule.parser.dataUrlCondition.maxSize 选项来修改此条件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。