zoukankan      html  css  js  c++  java
  • (23/24) webpack实战技巧:如何在webpack环境中使用Json

    在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

    输出结果为:

  • 相关阅读:
    jQuery实现图片延迟加载
    小猪学设计模式之—装饰者模式
    设计原则—依赖倒转原则
    ASP.NET MVC 在子页中引用头文件
    关于博客
    关于借钱
    面向对象编程(OOP)基础之UML基础
    C#抽象类、抽象方法、抽象属性
    小猪学设计模式——门面模式(外观模式)
    Eclipse 快捷键
  • 原文地址:https://www.cnblogs.com/wfaceboss/p/10159175.html
Copyright © 2011-2022 走看看