Webpack打包图片

Webpack打包图片#

资源模块 ：Webpack5 内置 资源模块（字体，图片等）打包，无需额外loader

步骤：

1. 配置webpack.config.js让Webpack拥有打包图片功能
2. 打包观察效果

asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现

注意：判断临界值默认为8KB

• 大于8KB文件：发送一个单独的文件并导出URL地址
• 小于8KB文件：导出一个data URI(base64字符串)

配置

module.exports={
    // ...
    module:{
        rules:[
            // ...
            {
                test:/\.(png|jpg|jpeg|gif)$/i,
                type:'asset',
                generator:{
                    // 指定打包图片名及路径
                    filename:'assets/[hash][ext][query]'
                },
            },
        ],
    },
},

• 占位符 [hash] 对模块内容做算法计算，得到映射的数字字母组合的字符串
• 占位符 [ext] 使用当前模块原本的占位符，例如：.png/.jpg等字符串
• 占位符 [query] 保留引入文件时代码中查询参数（只有URL下生效）

index.js

// 注意：js中引入本地图片资源要用import方式（若是网络图片http地址，字符串可以直接写）
import imgObj from './assets/logo.png';
const theImg = document.createElement('img');
theImg.src = imgObj;
document.querySelector('.login-wrap').appendChild(theImg);

打包观察效果

如图，less中背景图大图大于8kb，被单独放入assets，并导出URL地址

而小图小于8kb，则是转为base64格式的data URI字符串导出