携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第15天,点击查看活动详情
前面我们提到 asset/resource 资源类型可以发送一个单独的文件,并导出URL。
// webpack.config.js
//...
module.exports = {
//...
module:{
rules:[
{
test:/.png$/,
type: 'asset/resource'
}
]
}
}
rules 规则中配置的内容是个数组,我们通过配置很多个对象来去加载不同类型的文件。
- 通过 text 属性的正则表达式来去定义加载的文件的类型,$ 表示以 png 作为扩展名的类型文件。
- 通过 type 属性配置资源类型,所有与规则匹配的模块 type: 'asset/resource' 都将被发送到输出目录。
在 /src/index.js 文件中导入函数模块。
import hello from "./hello";
import imgsrc from './assets/webpack5.png'
const img =document.createElement('img')
img.src=imgsrc
document.body.appendChild(img)
执行 webpack 打包命名。
可以看到,默认情况下,所有具有类型的模块 asset/resource 都发送到输出根目录的 dist 目录下,并且自动命名。
通过 npx webpack-dev-server 启动服务,打开浏览器访问:http://localhost:8080/index_app.html。
我们能不能自已定义这个文件的目录以及文件名呢?当然是可以的,这里有两种方法:
第一种方法:在 webpack.config.js 配置文件中的 output 选项中配置 assetModuleFilename 属性,顾名思义就是资源模块的文件名,这里不但能设置文件名,而且还可以设置路径。
// webpack.config.js
//...
module.exports = {
//...
output:{
//...
assetModuleFilename:'images/webpack5-img.png'
},
}
执行 Webpack 打包命令,可以看到文件打包生成的路径和文件名称都是我们自己在 webpack.config.js 配置文件定义输出的文件名。
思考一下,在我们实际项目中,不可能所有的资源都 webpack5-img.png,因此,需要自动生成一个文件名,我们可以使用 Webpack 系统自带的默认的生成文件名的方法。
// webpack.config.js
//...
module.exports = {
//...
output:{
//...
assetModuleFilename:'images/[contenthash][ext]'
},
}
-
contenthash 表示根据文件的内容来生成一个 hash 的字符串。
-
ext 表示资源的扩展名。
执行 Webpack 打包命令,可以看到资源的名称是一长串字符串,并且扩展名会自动设置好,而不是自己定义 webpack5-img.png。
第二种方法:在定义 rules 的时候,通过 generator 属性配置输出路径、文件名以及扩展名。
// webpack.config.js
//...
module.exports = {
//..
module:{
rules:[
{
//...
generator: {
filename:'assetImage/[contenthash][ext]'
}
}
]
}
}
执行 Webpack 打包命令,可以看到在 dist 目录生成的路径是在 webpack.config.js 配置文件配置的 module 中的 rules 下配置路径,并且 output 中配置路径没有生效。
说明:rule.generator.filename 优先级高于 output.assetModuleFilename 优先级。
Rule.generator.filename 与 output.assetModuleFilename 相同,并且仅适用于 asset 和 asset/resource 模块类型。