在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
輸出結果為: