- 在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,并且配置资源 体积限制实现;
加载图片
如何可以自定义文件的输出路径和文件名
- 修改output,添加assetModuleFilename属性
- 在Rule中,添加一个generator属性,并且设置filename;
方式一
output: {
filename: "bundle.js",
// 必须是一个绝对路径
path: path.resolve(__dirname, "./build"),
assetModuleFilename: "img/[name].[hash:6][ext]"
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset/resource", //file-loader的效果
},
方式二
//方式二
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset/resource", //file-loader的效果
generator: {
filename: "img/[name].[hash:6][ext]"
}
},
// url-loader的limit效果
{
test: /\.(png|jpe?g|gif|svg)$/,
// type: "asset/resource", file-loader的效果
// type: "asset/inline", url-loader
type: "asset",
generator: {
filename: "img/[name].[hash:6][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 100 * 1024
}
}
},
加载字体
{
test: /\.ttf|eot|woff2?$/i,
type: "asset/resource",
generator: {
filename: "font/[name].[hash:6][ext]"
}
}
//或者
{
test: /\.ttf|eot|woff2?$/i,
loader:'file-loader',
options: {
name: "[name].[hash:6].[ext]",
outputPath:'font'
}
}