资源内联的意义
代码层面
- 页面框架的初始化脚本
- CSS内联避免页面闪动
请求层面：减少HTTP网络请求数
- 小图片或者字体内联（url-loader）
HTML内联
raw-loader：读取文件，返回一个string，将该string插入到指定位置
cnpm i raw-loader@0.5.1 -D
meta.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Vue.js 的中心化状态管理方案">
search.html
//html-webpack-plugin默认为ejs模板引擎
${require('raw-loader!./meta.html')}
JS内联
cnpm i lib-flexible -S
<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')}</script>
CSS内联
方案一：借助style-loader
{
test:/\.less$/,
use[
{
loader:'style-loader',
options:{
insertAt:'top',//样式插入到<head>中
singleton:true //将所有的style标签合并成一个
}
}
]
}
方案二：html-inline-css-webpack-plugin
网友评论