(23/24) webpack實戰(zhàn)技巧：如何在webpack環(huán)境中使用Json

在webpack1或者webpack2版本中，若想在webpack環(huán)境中加載Json文件，則需要加載一個json-loader的loader進來的。但是在webpack3.x版本中，則不需要在另外引入了，也可使用Json。

下面以webpack3.x為例來說明在webpack中如何使用json。（主要是讀取Json內(nèi)容）

1.?webpack中如何使用json

第一步：創(chuàng)建json數(shù)據(jù)

在根目錄下新建一個config.json文件，里面新增如下內(nèi)容：

{"name": "wfaceboss","net": "www.wfaceboss.top" }

第二步：現(xiàn)在我們的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;

第四步：啟動服務(wù)查看效果

若此節(jié)是根據(jù)前面的教程配置了熱打包的，此時直接在終端使用npm run server啟動即可，便可在瀏覽器上看到輸出效果。若沒有配置熱打包，則需要先打包后啟動服務(wù)。

打包指令：

npm run dev

啟動服務(wù)指令：

npm run server

輸出結(jié)果為：

posted on 2018-12-21 22:45 WFaceBoss 閱讀(...) 評論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/wfaceboss/p/10159175.html

總結(jié)

以上是生活随笔為你收集整理的(23/24) webpack实战技巧：如何在webpack环境中使用Json的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。