携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第17天,点击查看活动详情
source 资源
source 资源类型用于导出资源的源代码。使用 source 资源,需要在 webpack.config.js 文件中进行配置。
// webpack.config.js
//...
module.exports = {
//...
module:{
rules:[
{
test:/.txt$/,
type:'asset/source'
},
]
}
}
新增 /src/asset/exampleText.txt 文件,该文件存放文本内容。
// /src/asset/exampleText.txt
你好,Webpack!
在 /src/index.js 文件中导入资源。
// index.js
//...
import exampleText from './assets/exampleText.txt'
//...
const block=document.createElement('div')
block.style.cssText='width:200px;height:200px;background:red'
block.textContent=exampleText
document.body.appendChild(block)
执行 Webpack 打包编译命令,在 dist 目录下没有生成新的文件。
通过 webpack-dev-server 启动 Webpack 服务,打开浏览访问:http://localhost:8080/index_app.html。
可以看到,在 标签中,
通用资源类型
通用资源类型 asset,它在两个资源类型之间做自动选择,一个是导出一个 data URI,一个是发送一个单独的文件,也就是在 asset/inline 以及 asset/resource 之间做自动选择。那它如何做到自动选择呢?
// webpack.config.js
//...
module.exports = {
output: {
//..
assetModuleFilename:'images/[contenthash][ext]'
},
//...
module: {
rules: [
{
test:/.jpg$/,
type:'asset',
}
},
]
}
}
Webpack 将按照默认条件,自动地在 resource 和 inline 之间进行选择,小于 8kb 的文件,将会视为 inline 模块类型,否则会被视为 resource 模块类型。
执行 Webpack 编译打包命令,可以看到在 dist 目录下生成 images 目录,在该目录下生成 .jpg 图片资源。
可以通过在 webpack.config.js 配置文件中的 module rule 层级中,设置 Rule.parser.dataUrlCondition.maxSize 选项来修改输出资源类型条件。
如果一个模块源码大小小于 maxSize,那么模块会被作为一个 Base64 编码的字符串注入到包中, 否则模块文件会被生成到输出的目标目录中。
// webpack.config.js
//...
module.exports = {
output: {
//..
assetModuleFilename:'images/[contenthash][ext]'
},
//...
module: {
rules: [
{
test:/.jpg$/,
type:'asset',
parser: {
dataUrlCondition: {
maxSize: 100 * 1024 // 100kb
}
}
}
},
]
}
}
编译打包,发现在 dist 目录下没有生成 images 目录。
启动服务,在浏览器中访问:http://localhost:8080/index_app.html。可以看到程序能够正常显示图片页面。