资源内联的意义： 代码层面：
- 页面框架的初始化脚本(例如引入
lib-flexible时，rem的计算) - 上报相关打点
- css内联避免页面闪动(保证html请求回来的时候，内联在html中的css也一起返回回来了)。
请求层面：减少HTTP网络请求数
- 小图片或者字体内联(url-loader)
html和js内联
实现html和js内联需要使用raw-loader。
// 最新版本的raw-loader是有问题的，无法实现内联效果，需要使用特定版本的raw-loader
yarn add raw-loader@0.5.1 -D
1
2
2
// 内联html，将当前目录下的meta.html内联到html中
${require('raw-loader!./meta.html')}
1
2
2
// 内联js
<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>
1
2
2
css内联
方式1：使用style-loader：
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top', // 将css样式插入到<head>标签中
singleton: true // 将所有的style标签合并成一个
}
},
'css-loader',
'less-loader'
]
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
方式2：使用html-inline-css-webpack-plugin：使用更为广泛。将打包好的css chunk内联到html的head标签中。