如何修改webpack打包的index.html的模板文件
2017-09-23 本文已影响93人
张培_
问题描述
- 使用了create react app webpack自动帮助我们打包，造成了原本可以我们自己定义的打包模板html文件，我们不再并不能再对他做修改（因为自动生成的项目中并没有这个文件）
- 我们只能够编辑html中<body>中的内容。
- 因此想要修改<head>中的内容就成了难题
矛盾点
以前简单的修改一个标签的工作现在却找不地方修改。
Q1:我们为什么要修改模板文件？
- 因为模板文件中可以确定一些html信息
- 他可以确定一个html页面（文档）的<head>
- title：也就是打开的tab（文档）的名字
- base：定义当前文档中，所有的关于跳转的base url和target（_blank。。。）
- link：用来将外部资源（css、img）链接到文档中
- meta:定义当前文档的原信息（用于搜索引擎的搜索）
- 他可以确定一个html页面（文档）的<head>
Q2:如何修改head中的信息？
- 方法一：通过document提供的api修改
-
document.title="your title"修改
-
- 方法二：使用react的第三方库
-
react-helmet第三方库
-
Q3:最终我们决定使用react-helmet，为什么？
- 因为他可以帮助我们修改所有的head中的内容，比如我们想要修改title tag中加载的图标。
Q4:如何修改title文字左边logo picture？
- 通过调用
<link rel="icon" type="image/png" sizes="32x32" href="pathToimage"/>这就是link的作用引入外部资源进入文档。
Q5:很多资源可以被链接进入文档，那如何知道被链接进来的资源放在了文档的那个位置？比如我想要修改文档的tab title旁边的logo图片，使用link引入了图片，那么link如何才会将图片放在我想让他放的位置呢？
- 通过
link的rel属性值：当你的rel是icon 你在当前的link中引入的资源就会自动的放到icon的位置上
