在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

輸出結果為：