(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

輸出結果為:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM