Webpack 打包
打包图片
我们当前使用的webpack版本是webpack5:
在webpack5之前,加载这些资源我们需要使用一些loader,比如raw-loader 、url-loader、file-loader;
在webpack5开始,我们可以直接使用资源模块类型(asset module type),来替代上面的这些loader;
资源模块类型(asset module type)
通过添加 4 种模块类型替代 这些 loader:
- asset/resource 发送一个单独的文件并导出 URL。 之前通过使用 file-loader 实现;
- asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现;
- asset/source 导出资源的源代码 之前通过使用 raw-loader 实现;
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。 之前通过使用 url-loader,并且配置资源体积限制实现;
下面是一个示例的Webpack配置文件,演示了如何配置asset/resource
类型的处理规则:
const path = require('path');
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: 'images/[contenthash][ext][query]'
// [ext] : 扩展名, 比如 图片 png gif 等等
// [name]: 文件名字
// [hash]: 文件的内容,使用MD4的散列函数处理,生成的一个128位的hash值(32个十六进制);
// [hash: 8] 仅仅取前面8位
},
// 模块配置
module: {
rules: [
// 其他规则...
{
test: /\.(png|jpg|gif)$/i, // 匹配图片文件
type: 'asset/resource', // 使用 asset/resource 类型
outputPath: 'assets/', // 输出路径
publicPath: '/assets/' // 公共路径
}
],
generator: {
// 资源模块类型为 asset 时的配置
asset: {
publicPath: '/assets/', // 公共路径
outputPath: 'assets/' // 输出路径
},
// 资源模块类型为 asset/inline 时的配置
assetInline: {
publicPath: '/inline-assets/', // 公共路径
outputPath: 'inline-assets/' // 输出路径
},
// 资源模块类型为 asset/resource 时的配置
assetResource: {
publicPath: '/resources/', // 公共路径
outputPath: 'resources/' // 输出路径
}
}
}
};
在上面的配置文件中,我们添加了一个规则来处理图片文件(以.png
、.jpg
或.gif
结尾的文件)。通过设置type
为asset/resource
,Webpack会将匹配到的图片文件发送到指定的输出路径,并生成对应的URL。在这个例子中,我们将图片文件输出到assets/
目录下,并设置了公共路径为/assets/
。这样,在构建过程中,Webpack会自动处理这些图片文件,并将它们导出为URL。
generator是什么?
generator是Webpack配置中的一个选项,用于定义资源模块的生成器选项。
在Webpack中,资源模块是指那些需要被处理和输出的文件,例如图片、字体等。为了方便管理和控制这些资源模块的处理方式,Webpack提供了generator选项来集中配置资源模块的生成器选项。
通过设置generator选项,可以针对不同的资源模块类型进行不同的配置。例如,可以设置asset类型的资源模块的公共路径和输出路径,或者设置asset/inline类型的资源模块的公共路径和输出路径等。
在上面的配置文件中,我们使用generator选项来定义不同资源模块类型的生成器选项。对于asset类型的资源模块,我们设置了公共路径为/assets/,输出路径为assets/;对于asset/inline类型的资源模块,我们设置了公共路径为/inline-assets/,输出路径为inline-assets/;对于asset/resource类型的资源模块,我们设置了公共路径为/resources/,输出路径为resources/。这样,在构建过程中,Webpack会根据资源模块的类型自动选择合适的生成器选项进行处理和输出。
url-loader 的 limit 效果
开发中, 我们往往小的图片需要转换, 但是打的图片直接使用图片即可
这是因为小的图片可以转换成 base64,可以和页面一起被请求,减少不必要的请求过程;
而大的图片也进行转换,反而会影响页面的请求速度;
配置文件
rules: [
test: /\.(png|jpg|gif)$/i,
type: "asset",
generator: {
filename:"img/[name].[hash:6][ext]"
},
// 添加一个parser属性,并且制定dataUrl的条件,添加maxSize属性;
parser: {
dataUrlCondition: {
maxSize: 100*1024
}
}
]