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