最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】webpack-dev-server调试时加载fontawesome-webfont.woff失败

Webpack crifan 1926浏览 0评论

折腾:

【已解决】react-hot-boilerplate中把网络引用的css和js换成本地引用以便于提高加载速度

期间,其他css和js都是可以本地正常加载的。

但是就是

font-awesome

会出错:

echarts.js:1606 GET http://localhost:4000/assets/css/fonts/fontawesome-webfont.woff2?v=4.4.0
echarts.init @ echarts.js:1606
ReactEcharts._this.getEchartsInstance @ core.js:38
ReactEcharts._this.renderEchartDom @ core.js:62
componentDidMount @ core.js:82
(anonymous) @ ReactCompositeComponent.js:265
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:264
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:206
perform @ Transaction.js:153
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:140
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:320
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
(anonymous) @ index.js:17
(anonymous) @ index.js:1777
__webpack_require__ @ vendor.bundle.js:711
fn @ vendor.bundle.js:117
(anonymous) @ client:3
(anonymous) @ index.js:1721
__webpack_require__ @ vendor.bundle.js:711
webpackJsonpCallback @ vendor.bundle.js:26
(anonymous) @ index.js:1
localhost/:1 GET http://localhost:4000/assets/css/fonts/fontawesome-webfont.woff?v=4.4.0
localhost/:1 GET http://localhost:4000/assets/css/fonts/fontawesome-webfont.ttf?v=4.4.0

去参考之前的:

ReactJS-AdminLTE

看到,其是直接引用这两个的css的:

font-awesome

ionicons

        <!– Font Awesome –>
        <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>
        <!– Ionicons –>
        <link rel=”stylesheet” href=”https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css”>

所以自己此处也去改为同样的做法。

但是又遇到之前的问题:

网络加载慢

所以,终极的办法还是,解决这个问题,看看到底是什么原因导致的。

fontawesome-webfont.woff2 v=4.4.0 failed to load

woff2?v=4.3.0 Failed to load resource · Issue #5559 · FortAwesome/Font-Awesome

Failed to load resource: fontawesome-webfont.woff2 returns 404 [#2422431] | Drupal.org

ASP.NET Boilerplate – Web Application Framework View topic – .Woff files error 404

ASP.NET bundles looking for files in arbitrary locations – Stack Overflow

Failed to load resource: fontawesome-webfont.woff2 | Keenthemes

到底是:

缺少这文件?

还是webpack无法加载这种文件?缺少loader?

Moodle in English: Elegance – 404 error font-awesome after theme update

感觉好像两者都是:

先是从

react-hot-boilerplate/src/assets/css/font-awesome/font-awesome.min.css

中发现了,引用的文件,都没有下载下来:

/*!
*  Font Awesome 4.4.0 by @davegandy – http://fontawesome.io – @fontawesome
*  License – http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:’FontAwesome’;src:url(‘../fonts/fontawesome-webfont.eot?v=4.4.0’);src:url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0′) format(’embedded-opentype’),url(‘../fonts/fontawesome-webfont.woff2?v=4.4.0’) format(‘woff2’),url(‘../fonts/fontawesome-webfont.woff?v=4.4.0’) format(‘woff’),url(‘../fonts/fontawesome-webfont.ttf?v=4.4.0’) format(‘truetype’),url(‘../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular’)

另外,参考之前别的设置:

需要去添加woff2?|ttf|eot的loader配置的。

先去下载:

先找到下载的地址:

font-awesome – cdnjs.com – The best FOSS CDN for web related libraries to speed up your websites!

Font Awesome, the iconic font and CSS toolkit

然后把相关文件都下载了:

并且换用最新的4.7.0版本的:

然后放到项目中:

/react-hot-boilerplate/src/assets/lib/font-awesome/css/font-awesome.css

且打开看了看:

其中的确是引用了:

/*!
*  Font Awesome 4.7.0 by @davegandy – http://fontawesome.io – @fontawesome
*  License – http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
/* FONT PATH
* ————————– */
@font-face {
  font-family: ‘FontAwesome’;
  src: url(‘../fonts/fontawesome-webfont.eot?v=4.7.0’);
  src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0′) format(’embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.7.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.7.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.7.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular’) format(‘svg’);
  font-weight: normal;
  font-style: normal;
}

代码改为:

    <link rel=”stylesheet” href=”http://localhost:4000/assets/lib/font-awesome/css/font-awesome.css”>

然后就可以了,没有错误了,图标也都正常了:

【总结】

webpack-dev-server打包调试时,找不到:

fontawesome-webfont.woff

是因为:

我此处只下载了:

font-awesome.css

而没有下载font-awesome.css内部额外引用了的:

src: url(‘../fonts/fontawesome-webfont.eot?v=4.7.0’);

src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0’)

url(‘../fonts/fontawesome-webfont.woff2?v=4.7.0’)

url(‘../fonts/fontawesome-webfont.woff?v=4.7.0’)

url(‘../fonts/fontawesome-webfont.ttf?v=4.7.0’)

url(‘../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular’)

且要放到对应的路径下面。

解决办法:

从官网:

http://fontawesome.io

点击Download

下载完整的font-awesome的库,解压后,就包括了上面的所有的文件了。

然后在放到项目中,即可:

另外:

也可以自己单独去其他cdn,比如:

https://cdnjs.com/libraries/font-awesome

下载一个个的文件,然后放到对应的文件夹下。也可以。

转载请注明:在路上 » 【已解决】webpack-dev-server调试时加载fontawesome-webfont.woff失败

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
59 queries in 0.134 seconds, using 18.87MB memory