(23/24) webpack实战技巧：如何在webpack环境中使用Json

Posted 2021-01-28 wfaceboss

在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

输出结果为：