Webpack 中如何使用 Resource 资源

144 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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 打包命名。

image.png

可以看到,默认情况下,所有具有类型的模块 asset/resource 都发送到输出根目录的 dist 目录下,并且自动命名。

image.png

通过 npx webpack-dev-server 启动服务,打开浏览器访问:http://localhost:8080/index_app.html

image.png

我们能不能自已定义这个文件的目录以及文件名呢?当然是可以的,这里有两种方法:

第一种方法:在 webpack.config.js 配置文件中的 output 选项中配置 assetModuleFilename 属性,顾名思义就是资源模块的文件名,这里不但能设置文件名,而且还可以设置路径。

// webpack.config.js
//...
module.exports = {
    //...
    output:{
         //...
        assetModuleFilename:'images/webpack5-img.png'
    },
}

执行 Webpack 打包命令,可以看到文件打包生成的路径和文件名称都是我们自己在 webpack.config.js 配置文件定义输出的文件名。

image.png   思考一下,在我们实际项目中,不可能所有的资源都 webpack5-img.png,因此,需要自动生成一个文件名,我们可以使用 Webpack 系统自带的默认的生成文件名的方法。

// webpack.config.js
//...
module.exports = {
    //...
    output:{
         //...
        assetModuleFilename:'images/[contenthash][ext]'
    },
}
  • contenthash 表示根据文件的内容来生成一个 hash 的字符串。

  • ext 表示资源的扩展名。

执行 Webpack 打包命令,可以看到资源的名称是一长串字符串,并且扩展名会自动设置好,而不是自己定义 webpack5-img.png。

image.png   第二种方法:在定义 rules 的时候,通过 generator 属性配置输出路径、文件名以及扩展名。

// webpack.config.js
//...
module.exports = {
  //..
    module:{
        rules:[
            {
               //...
                generator: {
                    filename:'assetImage/[contenthash][ext]'
                }
            }
        ]
    }
}

执行 Webpack 打包命令,可以看到在 dist 目录生成的路径是在 webpack.config.js 配置文件配置的 module 中的 rules 下配置路径,并且 output 中配置路径没有生效。

image.png

说明:rule.generator.filename 优先级高于 output.assetModuleFilename 优先级。

Rule.generator.filename 与 output.assetModuleFilename 相同,并且仅适用于 asset 和 asset/resource 模块类型。