webpack 资源模块-05

1、asset resource ，生成单独的文件，并导出url，会在dist文件夹中出现

在index.js 中引入图片

在 webpack.config.js文件中添加配置

module: {
        rules: [
            {
                test: /\.png$/,
                type: 'asset/resource'
            }
        ]
    }

终端执行：npx webpack，生成dist文件夹

执行：npx webpack-dev-server，打开地址，图片加载进来了

自定义命名dist文件夹里面的图片文件夹名称，有两种方法

第一种：可以在 output 里面进行配置

    // 出口文件
    output: {
        // 设置资源模块文件名
        assetModuleFilename: 'images/[contenthash][ext]'
    }
contenthash：表示根据文件内容生成一个哈希的字符串
ext：扩展名，代表使用的是原资源的扩展名

第二种：在module --> rules里面配置：

module: {
        rules: [
            {
                test: /\.png$/,
                // 资源类型
                type: 'asset/resource',
                // 自定义图片文件夹名称
                generator: {
                    filename: 'images/[contenthash][ext]'
                }
            }
        ]
    }

如果两种方法同时设置了，generator 的优先级要高于 output

此时执行 npx webpack，dist 文件夹内生成了一个名叫 images的文件夹，里面有图片

2、asset inline，用于导出一个资源的 Data URL，不会在dist文件夹中出现

import logoSvg from './assets/wx-logo.svg'
const img2 = document.createElement('img')
img2.style .cssText = 'width: 600px; height: 200px'
img2.src = logoSvg
document.body.appendChild(img2)

 3、asset source 用于导出资源的源代码，不会在dist文件夹中出现

 

4、通用资源类型 asset，在导出一个 Data URL 和发送一个单独的文件之间自动选择，会在dist文件夹中出现

 修改配置文件

module: {
    rules: {
        test: /.\jpg$/,
        type: 'asset'
    }
}

现在，webpack会按照默认条件，自动的在 resource 和 inline 之间进行选择，小于 8kb的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型

可以通过在 webpack 配置的 module rules层级中，设置 Rule.parser.dataUrlCondition.maxSize 选项来修改此条件

rulse：[
    {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
            dataUrlCondition: {
                maxSize: 4 * 1024 //4kb
            }
        }
    }
]