我们当前使用的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(base64)。之前通过使用 url-loader 实现;
- asset/source- 导出资源的源代码。之前通过使用 raw-loader 实现;
- asset- 可以通过配置选择将资源打包成单独的文件还是data URI。之前通过使用 url-loader,并且通过配置限制资源体积实现;
Asset module type的使用
-
asset/resource
-加载图片:
export default = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset/resource", // file-loader的效果
generator: {
filename: "img/[name].[hash:6][ext]" //打包后的输出地址
},
}
]
}
}
但是,如何可以自定义文件的输出路径和文件名呢?
- 方式一:修改output,添加assetModuleFilename属性;(这种方式会修改所有通过asset module type打包的文件的输出地址)
- 方式二:在Rule中,添加一个generator属性,并且设置filename; (推荐这种方式,不同类型的类型使用不同的设置)
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
// 通过assets module type打包资源的输出地址
assetModuleFilename: "img/[name].[hash:6][ext]"
}
}
-加载字体文件
如果我们需要使用某些特殊的字体或者字体图标,那么我们会引入很多字体相关的文件,webpack本身不能处理字体文件,我们可以选择使用file-loader来处理,也可以选择直接使用webpack5的资源模块类型来处理。
module.export = {
module:{
rules = [
{
test: /\.ttf|eot|woff2?$/i,
type: "asset/resource",
generator: {
filename: "font/[name].[hash:6][ext]"
}
}
]
}
}
-
asset/inline
asset实现url-loader的limit效果,可以将图片资源转换成base64格式
export default = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset/inline", // url-loader
}
]
}
}
-
assets
asset实现url-loader的limit效果,并且通过配置选择是否将资源打包为base64
- 步骤一:将type修改为asset;
- 步骤二:添加一个parser属性,并且制定dataUrl的条件,添加maxSize属性;
export default = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset", //url-loader
generator: {
filename: "img/[name].[hash:6][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 100 * 1024
}
}
]
}
}