资源内联也就是将一些资源以内联的方式加入到html中。
一、内联的意义
代码层面：
-
将页面框架初始化的脚本以内联的方式插入到html中，比如像之前说的lib-flexible库就可以以内联的方式插入到html中。
-
上报机制以内联的方式放在html中。
-
首屏的css样式内联到html中，避免css造成页面的闪动。
请求数层面：
如果将本可以内联的代码保存为一个单独的文件，那么请求数就要增加，所以对于一些比较小的图片或者字体，我们可以使用内联的方式嵌入html中，减少请求数量。
图片或者字体的内联可以使用url-loader，url-loader有一个参数为limit，当资源的大小大于limit时，就会被抽成一个单独的文件，如果小于就会被转成base64格式，以内联的方式插入到htm中。
二、各资源的内联
1、html的内联
html的内联使用的是raw-loader，像这样：
2、js的内联
js的内联使用的也是raw-loader，使用方法和html的内联一样。
3、css的内联
css的内联使用之前讲的style-loader来处理，它会将css样式以内联的方式插入到head中。
它的options参数可以这样设置：
options： {
insertAt: 'top',
singleton: true, //将所有的css合并到一个style中
}
除此之外，我们还可以使用html-inline-css-webpack-plugin将打包好的css文件插入到html的head中。
const HtmlInlineCssWebpackPlugin = require("html-inline-css-webpack-plugin").default;
将HtmlInlineCssWebpackPlugin放到plugins中。
但是，我在启动时，发现会提示警告：
这是因为资源和入口文件的大小超过了文件限制，我们可以这样关闭：
performance: { hints: false, maxEntrypointSize: 50000000000, maxAssetSize: 4000000000000, },
hints为false将会关闭warning和error。
打包之后会看到css样式以内联的方式插入到了head中。
