亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

webpack json配置文件使用以及熱更新

在实际工作中,我们的项目都会配置一个Json的文件或者说API文件,作为项目的配置文件。有时候你也会从后台读取到一个json的文件,这节课就学习如何在webpack环境中使用Json。如果你会webpack1或者webpack2版本中,你是需要加载一个json-loader的loader进来的,但是在webpack3.x版本中,你不再需要另外引入了。

读出Json内容

第一步:现在我们的index.html模板中加入一个层,并给层一个Id,为了是在javascript代码中可以方便引用。

//index.html<div id="json"></div>

第二步:到src文件夹下,找到入口文件,我这里是entry.js文件。修改里边的代码,如下:

//entry.jslet json =require('../config.json');document.getElementById("json").innerHTML= json.name;

这两行代码非常简单,第一行是引入我们的json文件,第二行驶写入到到DOM中。

第三部:启用我们的npm run server 命令就可以在浏览器中看到结果了。

说说热更新

其实在webpack3中启用热加载相当的容易,只要加入HotModuleReplacementPlugin这个插件就可以了。

plugins: [    new webpack.HotModuleReplacementPlugin()
]

现在只要你启动 npm run server 后,修改index.html中的内容,浏览器可以自动给我们更新出最新的页面。

但这里说的热加更新和我们平时写程序的热加载不是一回事,比如说我们Vue或者React中的热更新,并不是刷新整个页面,而是一个局部更新,而这里的更新是重新刷新了页面。



作者:饥人谷_米弥轮
链接:https://www.jianshu.com/p/b473bff846f6


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消