webpack4 资源文件内联
程序员文章站
2022-05-30 21:21:11
...
减少请求和避免闪动
js和html内联:一般用于移动端引入
在html中进行内联:
(1)下载
cnpm install -D [email protected]
最新的版本的raw-loader使用了导出模块的时候使用了export default语法,html 里面用的话有问题。
(2)使用
html:
<%= require('raw-loader!文件路径') %>
如:<%= require('raw-loader!./meta.html') %>
js:内联时还需要添加babel-loader解析es6语法
<%= require('raw-loader!babel-loader!文件路径') %>
如:<script><%= require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js') %></script>
编译器会报错,但不会影响结果
在js文件中内联
(1)配置
{
use: [
{
loader: 'raw-loader',
options: {
esModule: false,
},
},
],
}
(2)使用
import xx from 'raw-loader!文件路径';
如果已经配置了后缀加载器:
import xx from '!!raw-loader!文件路径';
css内联:
方式一:使用style-loader
style-loader是css-in-js需要加载js后才能写入到style中,有一定的延迟性
html-inline-css-webpack-plugin是将css提取出来,再写入到html中,html网页源代码中已经内联好css了,没有延迟性了
方式二:使用html-inline-css-webpack-plugin
使用前奏:
首先使用mini-css-extract-plugin将css提取打包成一个独立的css chunk文件。
然后使用html-inline-css-webpack-plugin读取打包好的css chunk内容注入到页面
原本引入css资源地址,现在实现了css内联
(1)下载
cnpm i -D html-inline-css-webpack-plugin
(2)配置
const HTMLInlineCSSWebpackPlugin = require ( "html-inline-css-webpack-plugin" ). default ;
plugins: [
new HTMLInlineCSSWebpackPlugin(),
]
(1)下载
cnpm i html-inline-css-webpack-plugin -D
(2)配置
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
plugins: [
new HTMLInlineCSSWebpackPlugin(),
],