(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
输出结果为:
(23/24) webpack实战技巧:如何在webpack环境中使用Json的更多相关文章
- 业务零影响!如何在Online环境中巧用MySQL传统复制技术【转】
业务零影响!如何在Online环境中巧用MySQL传统复制技术 这篇文章我并不会介绍如何部署一个MySQL复制环境或keepalived+双主环境,因为此类安装搭建的文章已经很多,大家也很熟悉.在这篇 ...
- (21/24) webpack实战技巧:webpack对三方类库的优化操作
1.优化第一步--选用引入方式 在前面的学习中我们对于如何引入第三方类库(Jquery)推荐了两种方式,第一种是import引入的方式,第二种是ProvidePlugin插件.那两种引入方法有什么区别 ...
- (20/24) webpack实战技巧:watch实现热打包和添加代码备注
在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发,共同使用一个服务器时,这时候我们需要实时进行打包以确保团队间能进行联调或者进 ...
- (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换
1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...
- (19/24) webpack实战技巧:推荐使用的第三方类库打包方法
在日常的开发中,总避免不了引入第三方的框架,比如常用的JQuery,此节我们来学习一下如何优雅并正确的用webpack引入第三方库. 这里我们以第三方框架JQuery为例: 1.在入口文件中引入 1. ...
- Flink 实战:如何解决生产环境中的技术难题?
大数据作为未来技术的基石已成为国家基础性战略资源,挖掘数据无穷潜力,将算力推至极致是整个社会面临的挑战与难题. Apache Flink 作为业界公认为最好的流计算引擎,不仅仅局限于做流处理,而是一套 ...
- (22/24) webpack实战技巧:静态资源集中输出
工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中.此时 ...
- (18/24) webpack实战技巧:快速入门webpack模块化配置
搞个小例子便于学习: 具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置,单独拿出来制作成一个模块. 1.在根目录新建一个config文件,然后新建webpac ...
- 如何在windows环境中搭建apache+subversion(ZT)
我一直有一个想法就是在本机上象scm一样的搭建一个subversion服务器,然后每天写完代码的时候提交一下,这种感觉好好哦,之前我在windows环境中搭建过纯subversion的服务器兴奋过一阵 ...
随机推荐
- sklearn pipeline
sklearn.pipeline pipeline的目的将许多算法模型串联起来,比如将特征提取.归一化.分类组织在一起形成一个典型的机器学习问题工作流. 优点: 1.直接调用fit和predict方法 ...
- Python练习四
1.任意输入一串文字加数字,统计出数字的个数,数字相连的视为一个,如:12fd2表示两个数字,即12为一个数字. content = input("请输入内容:") for i i ...
- Linux----------ftp的介绍及安装使用
目录 一.ftp简介 二.常用的ftp软件有: 三.ftp数据连接模式 3.1命令连接是指文件管理类命令,始终保持连接,直到用户退出 3.2数据连接是指数据传输时创建和关闭的连接 四.用户验证方式 4 ...
- java_oop_三大特性
继承 概念 优点 语法 使用 有些父类成员不能被继承 private成员变量和方法 子类与父类不在同包,使用默认访问权限的成员 ...
- Java高级特性 第15节 解析XML文档(3) - JDOM和DOM4J技术
一.JDOM解析 特征: 1.仅使用具体类,而不使用接口. 2.API大量使用了Collections类. Jdom由6个包构成: Element类表示XML文档的元素 org.jdom: 解析xml ...
- Spark编程指南分享
转载自:https://www.2cto.com/kf/201604/497083.html 1.概述 在高层的角度上看,每一个Spark应用都有一个驱动程序(driver program).驱动程序 ...
- Azure CosmosDB (4) 在一致性(Consistency)可用性(Availability)和性能(Performance)之间的权衡
<Windows Azure Platform 系列文章目录> 我个人感觉,这个概念和分布式系统中的CAP原则是类似的: CAP原则指的是在一个分布式系统中,Consistency(一致性 ...
- 【C++】static关键字的总结
转自 https://www.cnblogs.com/BeyondAnyTime/p/2542315.html C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的s ...
- C89 和 C99 标准比较
注1: GCC支持C99, 通过 --std=c99 命令行参数开启,如: 代码:gcc --std=c99 test.c 注2:FFMPEG使用的是C99.而VC支持的是C89(不支持C99) ...
- FBI树-数据结构(二叉树)
问题 B: [2004_p4]FBI树-数据结构 时间限制: 1 Sec 内存限制: 125 MB提交: 57 解决: 46 题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称 ...