Webpack5 中 source 资源与通用资源类型

84 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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 目录下没有生成新的文件。

image.png

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

image.png

可以看到,在 标签中,

标签中的内容被加载进行了,这个就是 rource 资源类型的效果。

通用资源类型

通用资源类型 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 图片资源。

image.png

可以通过在 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 目录。

image.png

启动服务,在浏览器中访问:http://localhost:8080/index_app.html。可以看到程序能够正常显示图片页面。

  image.png