(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的服务器兴奋过一阵 ...
随机推荐
- Kali Linux Web后门工具、Windows操作系统痕迹清除方法
Kali Linux Web后门工具 Kali的web后门工具一共有四款,今天只介绍WebaCoo 首先介绍第一个WeBaCoo(Web Backdoor Cookie) WeBaCoo是一款隐蔽的脚 ...
- 转载 JAVA gc垃圾回收机制
thanks:https://m.oschina.net/u/123553 一.GC概要 JVM堆相关知识 为什么先说JVM堆? JVM的堆是Java对象的活动空间,程序中的类的对象从中分 ...
- Sqlsession 的理解
MyBatis的持久化解决方案是将用户从原始的JDBC访问中解放出来,用户只需要定义需要操作的SQL语句,无须关注底层的JDBC操作,就可以以面向对象的方式来进行持久化层操作.底层数据库连接的获取,数 ...
- 什么是真正的Java技术,本篇文章让你了解
“你学习一门技术的最佳时机是三年前,其次是现在.”这句话对于哪一种行业都很适用,如果你已经学习过Java,那么恭喜你你很有先见之明,如果你并不了解Java,这篇文章带你快速掌握Java的几个核心知识点 ...
- Pong 打乒乓
发售年份 1972 发售平台 多平台 开发商 雅达利(Atari) 类型 体育休闲 https://www.youtube.com/watch?v=fiShX2pTz9A
- proxmox网络
root@t1:~# cat /etc/network/interfaces# network interface settings; autogenerated# Please do NOT mod ...
- 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165308 张士洋
2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165308 张士洋 1.进入官网下载Kali Linux VirtualBox版本的镜像文件. 2.解压并 ...
- 关于jeesite的陷阱需要注意
jeesite,其框架主要为: 后端 核心框架:Spring Framework 4.0 安全框架:Apache Shiro 1.2 视图框架:Spring MVC 4.0 服务端验证:Hiberna ...
- HanLP vs LTP 分词功能测试
文章摘自github,本次测试选用 HanLP 1.6.0 , LTP 3.4.0 测试思路 使用同一份语料训练两个分词库,同一份测试数据测试两个分词库的性能. 语料库选取1998年01月的人民日报语 ...
- S50 抓取pattern数据
S50(原V50) 测试机台湾久元电子研发的一款数字芯片测试系统,行业内有很多人使用: 现在记录下S50抓取pattern数据的一些方法: 程序主要是通过read_log配合c代码实现,pattern ...