如何利用webpack打包的项目添加favicon呢？
这里提供给大家两个方法：
1. 直接使用favicon.ico的Data URI
<head> <title>Change Navigator</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2013%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2051.2%20(57519)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECommunications%402x%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%220.0460114286%200.109894737%203.23721143%200.109894737%203.23721143%2011.8421053%200.0460114286%2011.8421053%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-3%22%20points%3D%220.000137142857%200.473921053%203.11350857%200.473921053%203.11350857%2012.2059895%200.000137142857%2012.2059895%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%222.01%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Planning_Timeline%402x%22%20transform%3D%22translate(-753.000000%2C%20-823.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Communications%22%20transform%3D%22translate(753.000000%2C%20823.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M7.84470857%2C3.91883684%20C6.55419429%2C3.91883684%205.51328%2C4.98746842%205.51328%2C6.31331053%20C5.51328%2C7.63867895%206.55419429%2C8.70731053%207.84470857%2C8.70731053%20C9.09362286%2C8.70731053%2010.1345371%2C7.63867895%2010.1345371%2C6.31331053%20C10.1345371%2C4.98746842%209.09362286%2C3.91883684%207.84470857%2C3.91883684%20M9.13568%2C6.31331053%20C9.13568%2C7.03994211%208.55236571%2C7.63867895%207.84470857%2C7.63867895%20C7.09545143%2C7.63867895%206.51259429%2C7.03994211%206.51259429%2C6.31331053%20C6.51259429%2C5.54357368%207.09545143%2C4.94531053%207.84470857%2C4.94531053%20C8.55236571%2C4.94531053%209.13568%2C5.54357368%209.13568%2C6.31331053%22%20id%3D%22Fill-1%22%20fill%3D%22%2366bb6a%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M10.7328914%2C3.30451579%20C10.6492343%2C3.17614737%2010.52352%2C3.13351579%2010.39872%2C3.13351579%20C10.2730057%2C3.13351579%2010.1477486%2C3.17614737%2010.0220343%2C3.30451579%20C9.93837714%2C3.39025263%209.89677714%2C3.51862105%209.89677714%2C3.64698947%20C9.89677714%2C3.81798947%209.93837714%2C3.94635789%2010.0220343%2C4.03256842%20C11.2759771%2C5.31672632%2011.2759771%2C7.37156842%2010.0220343%2C8.65572632%20C9.85517714%2C8.86983158%209.85517714%2C9.21230526%2010.0220343%2C9.38330526%20C10.1477486%2C9.51167368%2010.2730057%2C9.55477895%2010.39872%2C9.55477895%20C10.48192%2C9.55477895%2010.6492343%2C9.51167368%2010.7328914%2C9.42641053%20C11.5269486%2C8.61309474%2011.9868343%2C7.49993684%2011.9868343%2C6.34414737%20C11.9868343%2C5.18835789%2011.5269486%2C4.11783158%2010.7328914%2C3.30451579%22%20id%3D%22Fill-3%22%20fill%3D%22%2366bb6a%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M12.0382629%2C1.99146316%20C11.8302629%2C1.77641053%2011.4970057%2C1.77641053%2011.2890057%2C1.99146316%20C11.2058057%2C2.07767368%2011.1642057%2C2.20651579%2011.1642057%2C2.33535789%20C11.1642057%2C2.4642%2011.2058057%2C2.59351579%2011.2890057%2C2.72188421%20C13.24512%2C4.74262105%2013.24512%2C7.96604211%2011.2890057%2C9.98630526%20C11.2058057%2C10.0725158%2011.1642057%2C10.2013579%2011.1642057%2C10.3302%20C11.1642057%2C10.5021474%2011.2058057%2C10.6314632%2011.2890057%2C10.7172%20C11.3722057%2C10.8034105%2011.4970057%2C10.8460421%2011.6638629%2C10.8460421%20C11.7886629%2C10.8460421%2011.9550629%2C10.8034105%2012.0382629%2C10.7172%20C13.16192%2C9.51356842%2013.7863771%2C7.96604211%2013.7863771%2C6.33277895%20C13.7863771%2C4.65641053%2013.16192%2C3.10888421%2012.0382629%2C1.99146316%22%20id%3D%22Fill-5%22%20fill%3D%22%2366bb6a%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-9%22%20transform%3D%22translate(12.342857%2C%200.364026)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Clip-8%22%3E%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.919954286%2C0.271610526%20C0.709668571%2C0.0556105263%200.414354286%2C0.0556105263%200.204068571%2C0.271610526%20C-0.00667428571%2C0.487610526%20-0.00667428571%2C0.789821053%200.204068571%2C1.00534737%20C1.51012571%2C2.34397895%202.22601143%2C4.11413684%202.22601143%2C5.97050526%20C2.22601143%2C7.87045263%201.51012571%2C9.64013684%200.204068571%2C10.9787684%20C-0.00667428571%2C11.1511895%20-0.00667428571%2C11.4969789%200.204068571%2C11.7125053%20C0.288182857%2C11.7556105%200.372297143%2C11.8422947%200.58304%2C11.8422947%20C0.709668571%2C11.8422947%200.83584%2C11.7987158%200.919954286%2C11.7125053%20C2.39469714%2C10.2014526%203.23721143%2C8.17218947%203.23721143%2C6.01361053%20C3.23721143%2C3.85503158%202.43675429%2C1.78266316%200.919954286%2C0.271610526%22%20id%3D%22Fill-7%22%20fill%3D%22%2366bb6a%22%20mask%3D%22url(%23mask-2)%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-16%22%20transform%3D%22translate(0.000000%2C%200.364026)%22%3E%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5.48402286%2C4.03237895%20C5.64630857%2C3.81827368%205.64630857%2C3.4758%205.48402286%2C3.26169474%20C5.36196571%2C3.17595789%205.24036571%2C3.13332632%205.11876571%2C3.13332632%20C4.99716571%2C3.13332632%204.87510857%2C3.17595789%204.79373714%2C3.26169474%20C3.16996571%2C4.97406316%203.16996571%2C7.71385263%204.79373714%2C9.38358947%20C4.87510857%2C9.51195789%204.99716571%2C9.55458947%205.11876571%2C9.55458947%20C5.32173714%2C9.55458947%205.44333714%2C9.42622105%205.48402286%2C9.34095789%20C5.56539429%2C9.25522105%205.60608%2C9.12685263%205.60608%2C8.99801053%20C5.60608%2C8.86964211%205.56539429%2C8.74127368%205.48402286%2C8.65601053%20C4.26619429%2C7.37137895%204.26619429%2C5.27390526%205.48402286%2C4.03237895%22%20id%3D%22Fill-10%22%20fill%3D%22%2366bb6a%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4.20790857%2C2.67911053%20C4.41590857%2C2.46405789%204.41590857%2C2.16326842%204.20790857%2C1.94868947%20C4.12470857%2C1.86247895%203.99990857%2C1.77674211%203.87510857%2C1.77674211%20C3.75030857%2C1.77674211%203.62550857%2C1.86247895%203.50070857%2C1.94868947%20C1.21316571%2C4.35547895%201.17156571%2C8.31026842%203.50070857%2C10.7170579%20C3.62550857%2C10.8032684%203.75030857%2C10.8463737%203.87510857%2C10.8463737%20C4.04150857%2C10.8463737%204.16630857%2C10.8032684%204.24950857%2C10.6744263%20C4.41590857%2C10.4593737%204.41590857%2C10.1585842%204.24950857%2C9.94353158%20C2.29476571%2C7.96637368%202.29476571%2C4.69937368%204.20790857%2C2.67911053%22%20id%3D%22Fill-12%22%20fill%3D%22%2366bb6a%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-4%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Clip-15%22%3E%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.95922286%2C1.36951579%20C3.04150857%2C1.28330526%203.08265143%2C1.15351579%203.08265143%2C0.981094737%20C3.08265143%2C0.851305263%203.04150857%2C0.721989474%202.95922286%2C0.635778947%20C2.75396571%2C0.419778947%202.46596571%2C0.419778947%202.26070857%2C0.635778947%20C0.82208%2C2.14683158%200.000137142857%2C4.17562105%200.000137142857%2C6.3342%20C0.000137142857%2C8.49325263%200.780937143%2C10.5225158%202.26070857%2C12.0766737%20C2.30185143%2C12.1197789%202.42528%2C12.2059895%202.63053714%2C12.2059895%20C2.75396571%2C12.2059895%202.87693714%2C12.1628842%202.95922286%2C12.0766737%20C3.16493714%2C11.8606737%203.16493714%2C11.5153579%202.95922286%2C11.3424632%20C0.369965714%2C8.57946316%200.369965714%2C4.13251579%202.95922286%2C1.36951579%22%20id%3D%22Fill-14%22%20fill%3D%22%2366bb6a%22%20mask%3D%22url(%23mask-4)%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"> </head>
2. 利用webpack打包，然后访问build后的favicon.icon
第一步：// src/index.html <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>React Slingshot</title> <link rel="shortcut icon" href="favicon.ico"> </head>
第二步：// src/polyfills.js 或者 src/main.js
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
import './favicon.ico'
第三步： // webpack.config.js
{
test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{ test: /.ico$/,
loader: 'file-loader?name=[name].[ext]'
},
注意：
1. 第一步index.html 里面的favicon.ico的路径必须和第三步打包以后的favicon的路径相同。
你可以通过服务器域名和路径去访问图片，看看路径是否正确。比如这里假设我的项目运行的服务器是 localhost:8080/cn-frontend,
根据第三步高亮的部分我们知道打包后的favicon.icon的路径是cn-frontend/favicon.icon, 那么我们就可以直接访问 localhost:8080/cn-frontend/favicon.icon
2. 第二步是必须的，否则favicon.ico不会打包进去；第二步就是为了告诉webpack去打包该文件
