webpack 静态资源内联_综合

一、什么是静态资源内联

二、使用

2.1 raw-loader 内联 html

2.2 raw-loader 内联 JS

2.3 html-inline-css-webpack-plugin 实现CSS内联

三、现象

一、什么是静态资源内联

静态资源内联，即将css、js、图片等资源，内联到html。我们可以通过静态资源内联来减少文件请求数量，优化加载速度

代码层面:

页面框架的初始化脚本，如rem换算等
上报相关打点
css 内联避免页面闪动

请求层面：减少 http 网络请求数

小图片或字体内联(url-loader)

二、使用

// 需要使用0.5.1版本
npm i raw-loader@0.5.1 -D

2.1 raw-loader 内联 html

<script>${require('raw-loader!babel-loader!./meta.html')}</script>

// search.html<!DOCTYPE html>
<html lang="en">
<head>${require('raw-loader!./meta.html')} // 内联meta.html<title>Document</title><script>${require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')}</script><title>Document</title>
</head>
<body><div id="root"></div><script type="text/javascript" src="./search.js"></script>
</body>
</html>

2.2 raw-loader 内联 JS

// 若包含ES6，则先用babel-loader转换
<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>

2.3 html-inline-css-webpack-plugin 实现CSS内联

// CSS内联
npm i html-inline-css-webpack-plugin -D

// webpack.prod.jsmodule.exports = { plugins: [ ...,new HTMLInlineCSSWebpackPlugin()],
}

三、现象

github项目地址： webpack样例

可以看到，meta.html的文件内容，被内联进了index.html
webpack 静态资源内联

js文件中的内容，也被内联进了index.html

webpack 静态资源内联