webpack5配置xml、csv、toml、yaml、json5加载
-
xml：
<note> <to>Tove</to> <from> <title>Jani</title> <age>18</age> </from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>
csv
sj_mino1001.jpg，715282，4FB55FE8， sj_mino1002.jpg，471289，93203C5C， sj_mino1003.jpg，451929，C4E80467，
toml
title = "taml Example" [owner] name = "tom" origin = "github"
yaml
title: yaml Example
owner:
name: tom
origin: github
json5
{ // comment title: 'JSON5 Example', owner: { name: 'tom', origin: 'github', bio: 'github & CEO\n\ likes beer.', dob: '2022' } }
在webpack5中配置对应的loader加载
module: { // 模块加载配置
rules: [
{
test: /\.png$/,
type: 'asset/resource', // 生成资源文件
generator: {
filename: 'images/[contenthash][ext]', // generator的优先级高于output里的优先级
}
},
{
test: /\.svg$/,
type: 'asset/inline', // 生成一个datauri 比如把svg生成base64，从而就不生成资源文件了
},
{
test: /\.txt$/,
type: 'asset/source' // 导出资源的源代码
},
{
test: /\.jpg$/,
type: 'asset', // asset通用资源类型会在 asset/inline 和 asset/source 自动选择
parser: {
dataUrlCondition: {
maxSize: 8 * 1024, // 当资源文件大于8kb时生成资源文件(asset/source)，否则生成base64（inline)
}
}
},
{
test: /\.css|less$/,
// use: 'css-loader', // 使css可以用模块导出
// use: ['style-loader', 'css-loader', 'less-loader'], // 把css-loader识别的css模块通过style-loader放到页面上,先执行css-loader再执行style-loader
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/, // 加载font字体资源
type: 'asset/resource' // 这个类型可以帮我们载入任何类型的资源
},
{
test: /\.(csv|tsv)$/, // 加载csv文件资源
use: 'csv-loader'
},
{
test: /\.xml$/, // 加载xml文件资源
use: 'xml-loader'
},
{
test: /\.toml$/, // 加载toml文件资源
type: 'json',
parser: {
parse: toml.parse
}
},
{
test: /\.yaml$/, // 加载yaml文件资源
type: 'json',
parser: {
parse: yaml.parse
}
},
{
test: /\.json5$/, // 加载json5文件资源
type: 'json',
parser: {
parse: json5.parse
}
},
]
},
对应loader
csv-loader 、 json5、 toml、 xml-loader、 yaml
-
分类:
webpack5
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
2021-06-05 nodejs零碎知识
2020-06-05 移动端 input的失去焦点事件和点击按钮的点击事件冲突，怎么解决？