{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}css-loader从css文件中提取css字符串，遇到css中的url图片地址，会将图片处理并添加到output指定目录，并将最终url引用地址替换原来url引用地址。
style-loader转换成JS执行脚本：创建<style>标签，将提取字符串写入标签，appendChild到<head>?中。
loader执行顺序：从右到左（从下往上）。
// loader规则
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
// 处理import图片文件
import MyImage from './my-image.png'
// 处理url字体文件
@font-face {
font-family: 'MyFont';
src: url('./my-font.woff2') format('woff2'),
url('./my-font.woff') format('woff');
font-weight: 600;
font-style: normal;
}
.hello {
color: red;
font-family: 'MyFont';
background: url('./icon.png');
}?asset/resource会将图片文件处理并添加到output目录，将最终url赋值给MyImage。
?asset/resource会将字体文件处理并添加到ouput目录，将最终url引用地址替换原来url引用地址。
// loader规则
{
test: /\.(csv|tsv)$/i,
use: ['csv-loader'],
},
{
test: /\.xml$/i,
use: ['xml-loader'],
}
// 处理import导入xml和csv文件
import Data from './data.xml';
import Notes from './data.csv';csv-loader会从csv文件提取出数据，并转换成json格式。
xml-loader会从xml文件提取出数据，并转换成json格式。
????????有template以template为准，没有template会创建一个html文件，所有生成的bundle添加到到html文件中。
? ? ? ? loader干得活就是转换资源，且webpack期望loader链中最后一个loader返回JavaScript。loader不是魔法师，没有魔法~