1. 程式人生 > >(23/24) webpack實戰技巧:如何在webpack環境中使用Json

(23/24) webpack實戰技巧:如何在webpack環境中使用Json

在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

輸出結果為: