您的位置：首页 > Web前端 > JavaScript

HtmlWebpackPlugin以inine方式引入JS/CSS文件

2017-12-12 15:30 821 查看

当我们使用HtmlWebpackPlugin生成html的时候，一般结构如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my webpack</title>
<script type="text/javascript" src="js/main-d641c2a06a30d2887fb8.js"></script>
</head>
<body>

</body>
</html>

那么问题就来了，JS文件以src方式引入到html中会存在一个问题，那就是会增加一些http请求来获取文件。该如何以inline形式引入进页面呢？这个时候会大大提高我们这个脚本的运行速度和加载速度。

可以参考官方给的示例文档html-webpack-plugin进行配置。

1. 首先，我们需要把<script>标签放入html页面的头部，对JS内容进行读取

2. 命令行运行一下webpack，打开生成的html页面

代码已经在html页面生成。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航