美文网首页
(23/24) webpack实战技巧:如何在webpack环境

(23/24) webpack实战技巧:如何在webpack环境

作者: wfaceboss | 来源:发表于2018-12-21 23:08 被阅读1次

    webpack1或者webpack2版本中,若想在webpack环境中加载Json文件,则需要加载一个json-loaderloader进来的。但是在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

    相关文章

      网友评论

          本文标题:(23/24) webpack实战技巧:如何在webpack环境

          本文链接:https://www.haomeiwen.com/subject/wjjbkqtx.html