使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
1、首先你自己把webstorm安装完成。
请参考这篇文章进行安装和破解http://www.cnblogs.com/chengxs/p/6245281.html
2、然后需要你的电脑安装了node.js。
可以参考这篇文章http://www.cnblogs.com/chengxs/p/6221393.html
2、第一种方法：使用命令行窗口。可以在你要创建项目的文件夹里进行全局安装webpack和webpack-dev-server这两个东西，webpack-dev-server这个好像是一个虚拟的服务器。
第二种方法（推荐）：使用webstorm自带的terminal控制台。
调出webstorm控制台：alt+F12。
3、在进行2之后，文件夹里回多一个node_modules文件夹，这个是需要的各种包。
4、使用webstorm进行编程代码实现“HelloWorld”
4.1新建一个index.html文件，
写上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello world</h1>
<button>提交</button>
</body>
</html>
4.2新建一个webpack.config.js文件，(选择JavaScript类型)
/**
* Created by on 2017/1/5.
*/
module.exports={
entry:'./index.js', //我们告诉webpack，入口文件是：index.js,。webpack根据这文件来提取所有js和其他资源文件
output:{
// path:_dirname,
filename:'bundle.js' //打包输出的文件是bundle.js
}
};
4.3然后来修改index.html文件
在index.html文件中，使用<script>标签来引入bundle.js文件。
<script src="./bundle.js"></script>
4.4创建index.js文件
使用console.Log输出‘hi’
/**
* Created by on 2017/1/5.
*/
document.addEventListener('DOMContentLoaded',function(){
console.log('hi');
});
4.5回到控制台，输入webpack，回车运行，就会生成bundle.js文件
4.6 在谷歌浏览器中安装jetbrainIDE插件。
在你输入webpack，回车后，webstorm下边会出现下图，你点击就可以进入到谷歌商城进行安装插件和配置谷歌浏览器。（PS：需要你的电脑可以上Google）
不会上Google的，可以参考这篇文章：http://www.cnblogs.com/chengxs/p/6238466.html
4.6运行网页，选中index.html，右键，选择run“index.html”。
4.7查看谷歌浏览器控制台。
此时查看谷歌浏览器控制台（F12），输出了hi
到这里，就是使用webpack打包工具完成“HelloWorld”，生成输出文件‘bundle.js’，通过index.config.js来告诉webpack入口地址是哪一个文件，通过这个文件来提取所有的js文件和资源文件。
5、使用jquery实现点击button弹出一个alert。
5.1先加入jquery，在webstorm控制台输入
npm i jquery --save
5.2在index.js文件中先引入jquery。
/**
* Created by BFD-638 on 2017/1/5.
*/
var $=require('jquery'); //引入jquery
document.addEventListener('DOMContentLoaded',function(){
console.log('hi');
$('button').click(function(){alert('clicked')}); //在button上添加事件
});
5.3在webstorm中控制台中输入webpack，运行，刷新页面。
alert出现说明成功。
6、在webstorm控制台使用webpack-dev-server命令，时刻检测所有文件变化，从新输出bundle.js。
每一次都要运行webpack，然后刷新，感觉很烦。但是webpack提供命令“webpack-dev-server”，这个命令会时刻监控所有文件变化，从新输出bundle.js。
使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert的更多相关文章
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这篇文章进行安装和破解 ...
- webpack 构建简单的vue项目
---恢复内容开始--- webpack主要执行流程: 入口→loader处理→出口 // webpack.config.js 文件:const path = require('path') // 引 ...
- Xcode5下使用纯代码构建简单的HelloWorld程序
转自:http://blog.csdn.net/developerxyf/article/details/12874935 新发布的Xcode5在使用模板创建工程的时候取消了以往是否要选择storyb ...
- webpack工具学习 构建简单vue项目（不依赖vue-cli） webpack4.0
目的用webpack构建简单前端项目 1.npm init (npm init -y) 形成package.json 2.npm install --save-dev webpack 形成 n ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境
通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...
- springboot学习随笔（二）：简单的HelloWorld
接上章搭建好springboot环境后,开始开发入门级HelloWorld 一.构建简单的springboot项目 1.新建项目,选择Spring/Spring Starter Project 2.N ...
- webpack构建篇
WEBPack 构建 -- 基于webpack4 1.环境准备 NodeJs: 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.其使用了一个事件驱动.非阻塞式 I/O 的模 ...
- webpack构建具备版本管理能力的项目
webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...
随机推荐
- 故障重现(内存篇2)，JAVA内存不足导致频繁回收和swap引起的性能问题
背景起因: 记起以前的另一次也是关于内存的调优分享下 有个系统平时运行非常稳定运行(没经历过大并发考验),然而在一次活动后,人数并发一上来后,系统开始卡. 我按经验开始调优,在每个关键步骤的加入如 ...
- Linux 江湖系列阶段性总结
引言 我使用 Linux 已经有很多年了,最开始接触 Linux 的时候是从 RedHat 9(没有 Enterprise),中途换过 N 个不同的发行版.多年前,我在 BlogJava 上面分享 J ...
- 从Membership 到 .NET4.5 之 ASP.NET Identity
我们前面已经讨论过了如何在一个网站中集成最基本的Membership功能,然后深入学习了Membership的架构设计.正所谓从实践从来,到实践从去,在我们把Membership的结构吃透之后,我们要 ...
- Java基础Collection集合
1.Collection是所有集合的父类,在JDK1.5之后又加入了Iterable超级类(可以不用了解) 2.学习集合从Collection开始,所有集合都继承了他的方法 集合结构如图:
- Redis链表实现
链表在 Redis 中的应用非常广泛, 比如列表键的底层实现之一就是链表: 当一个列表键包含了数量比较多的元素, 又或者列表中包含的元素都是比较长的字符串时, Redis 就会使用链表作为列表键的底层 ...
- Android公共title的应用
我们在开发Android应用中,写每一个页面的时候都会建一个title,不是写一个LinearLayout就是写一个RelativeLayout,久而久之就会觉得这样繁琐,尤其几个页面是只是标题不一样 ...
- JavaScript学习笔记(三)——this、原型、javascript面向对象
一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...
- 【干货分享】流程DEMO-付款申请单
流程名: 付款申请单 业务描述: 包括每月固定开支.固定资产付款.办公用品付款.工资发放.个人所得税缴纳.营业税缴纳.公积金.社保缴纳和已签订合同的按期付款,最后是出纳付款,出纳核对发票. 流程发起 ...
- 用Java代码实现拦截区域网数据包
起因: 吃饭的时间在想如果区域网内都是通过路由器上网,那如何实现拦截整个区域网的数据包,从而实现某种窥探欲. 思路: 正常是通过电脑网卡预先设置或分配的IP+网关对路由器进行通讯,比如访问百 ...
- git如何切换远程仓库
场景 工作时可能由于git仓库的变动,需要我们将已有代码切换仓库.比如我们先用的gitlab,现在要切换到github上. 迁移命令 代码迁移其实也很简单. 先保证本地代码是最新代码 $ git pu ...