webpack5配置xml、csv、toml、yaml、json5加载
xml：
<note> <to>Toveto> <from> <title>Janititle> <age>18age> from> <heading>Reminderheading> <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