使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
使用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来实现的更多相关文章
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- 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 ...
- springboot学习随笔（二）：简单的HelloWorld
接上章搭建好springboot环境后,开始开发入门级HelloWorld 一.构建简单的springboot项目 1.新建项目,选择Spring/Spring Starter Project 2.N ...
- Mybatis_1（认识）一个简单的HelloWorld
1. 介绍: MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架. MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索. MyBatis可以使用简单的XM ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- 构建简单的Maven工程，使用测试驱动的方式开发项目
构建简单的Maven工程很简单,这里写这篇随笔的原因是希望自己能记住几个小点. 一.安装Maven 1.下载maven:https://maven.apache.org/download.cgi 2. ...
随机推荐
- 网络设备之ospf2
OSPF(Open Shortest Pass First,开放最短路径优先协议),是一个最常用的内部网管协议,是一个链路状态协议. OSPF的特点 OSPF是一种无类路由协议,支持VLSM可变长子网 ...
- 【REDIS】 redis-cli 命令
Redis提供了丰富的命令(command)对数据库和各种数据类型进行操作,这些command可以在Linux终端使用. 在编程时,比如使用Redis 的Java语言包,这些命令都有对应的方法.下面将 ...
- find 命令search使用
GNU在目录树中查找的时候,是根据所给的名字从根节点开始从左到右匹配.根据优先级规则,直到在某一个节点找到结果了才会移动到下一个文件名字. 1.找空目录 find ./path -depth -ty ...
- The US in understimating Huawei, says founder Ren zhengfei
Huawei Founder Ren Zhengfei has downplayed the impact of the US executive order that cripple Huawei' ...
- initcall机制
参考:initcall机制 /* include/linux/init.h: */ /* For assembly routines */ #define __HEAD .section " ...
- OSPF 提升 一 ----基础
ospf ccnp内容 一 link-state protocols IGP 开放式的最短路径优先协议 公有协议 支持中到大型的网络 spf算法 链路状态协议 1. ...
- numpy.clip(a, a_min, a_max, out=None)(values < a_min are replaced with a_min, and those > a_max with a_max.)
numpy.clip(a, a_min, a_max, out=None) Clip (limit) the values in an array. Given an interval, values ...
- FineMessBox的js依赖导致错误Uncaught ReferenceError: addEvent is not defined
/** * COMMON DHTML FUNCTIONS * These are handy functions I use all the time. * * By Seth Banks ( ...
- 初学划分树，小见解之！POJ-2104/HDU-2665
划分树 本来是学主席树的,可怜我等巨弱观群巨博客难解fotle主席的思想精髓.于是学了一下划分树,嗯,花了一下午时间理解build(其实自己模拟一遍就通了),我很难理解为什么划分树会看不懂而能学会主席 ...
- Title共通写法
用: <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_c ...