webpack将html引用的js文件直接嵌入到页面中以减少请求的次数

最新推荐文章于 2022-09-04 14:57:10 发布

XBQ0510Qi

最新推荐文章于 2022-09-04 14:57:10 发布

阅读量3k

点赞数

分类专栏： webpack 文章标签： webpack html-webpack-plugin 将js嵌入html

本文链接：https://blog.csdn.net/XBQ0510Qi/article/details/79993867

版权

需要将引入js文件直接嵌入到html文件中，以减少文件的请求次数，达到更好的性能，htmlWebpackPlugin官方没有提供配置想去完成这个功能，但是由于该需求的广泛，官方提供了处理方法

https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade

html对应的具体代码为：

<script>
<%for(varfileinhtmlWebpackPlugin.files.chunks){%>
<%=
compilation.assets[htmlWebpackPlugin.files.chunks[file].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()
%>
<%}%>
</script>

将这一段代码插入到你需要提升性能的html文件的head中，我这里简单写一个HTML文件

<!doctype html>
<html>
<head>
    <title><%= htmlWebpackPlugin.options.title%></title>

<script>
    <%for(var file in htmlWebpackPlugin.files.chunks){ %>
    <%=
    compilation.assets[htmlWebpackPlugin.files.chunks[file].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()
    %>
    <%}%>

</script>
</head>
<body>
<!--我是一行注释-->
</body>
</html>

思路就是在html先准备一个script标签，然后还是通过<%%>模板遍历配置文件中的chunks,取到对应的js文件的相对路径，通过compilation.assets['相对路径'].source()获取文件的内容，下面是webpack打包之后的html文件的内容，成功将js文件获取并嵌入到html文件中：

<!doctype html>
<html>
<head>
    <title>index.html</title>

<script>
    
    /

最低0.47元/天解锁文章

XBQ0510Qi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
webpack将html引用的js文件直接嵌入到页面中以减少请求的次数

需要将引入js文件直接嵌入到html文件中，以减少文件的请求次数，达到更好的性能，htmlWebpackPlugin官方没有提供配置想去完成这个功能，但是由于该需求的广泛，官方提供了处理方法https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jadehtml对应的具体代码为：&lt...
复制链接

扫一扫