在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
启动即可,便可在浏览器上看到输出效果。若没有配置热打包,则需要先打包后启动服务。
打包指令:
pm run dev
启动服务指令:
npm run server
输出结果为:
image.png
网友评论