(23/24) webpack實戰技巧:如何在webpack環境中使用Json
阿新 • • 發佈:2018-12-21
在webpack1或者webpack2版本中,若想在webpack環境中載入Json檔案,則需要載入一個json-loader的loader進來的。但是在webpack3.x版本中,則不需要在另外引入了,也可使用Json。
下面以webpack3.x為例來說明在webpack中如何使用json。(主要是讀取Json內容)
1. webpack中如何使用json
第一步:建立json資料
在根目錄下新建一個config.json檔案,裡面新增如下內容:
{ "name": "wfaceboss", "net": "www.wfaceboss.top" }
第二步:現在我們的index.html模板中新增一個層,並給層一個Id屬性。
便於在javascript程式碼中可以方便引用。
<div id="json"></div>
第三步:修改入口檔案
src/entry.js檔案中新增下面程式碼:
var json =require('./../config.json'); document.getElementById("json").innerHTML="name:"+json.name+" site:"+json.site;
第四步:啟動服務檢視效果
若此節是根據前面的教程配置了熱打包的,此時直接在終端使用npm run server啟動即可,便可在瀏覽器上看到輸出效果。若沒有配置熱打包,則需要先打包後啟動服務。
打包指令:
npm run dev
啟動服務指令:
npm run server
輸出結果為: