使用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,以及各种预编译语言都不在话 ...
随机推荐
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- Chrome出了个小bug：论如何在Chrome下劫持原生只读对象
Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...
- ABP文档 - Hangfire 集成
文档目录 本节内容: 简介 集成 Hangfire 面板授权 简介 Hangfire是一个综合的后台作业管理器,可以在ABP里集成它替代默认的后台作业管理器,你可以为Hangfire使用相同的后台作业 ...
- git 命令
切换仓库地址: git remote set-url origin xxx.git切换分支:git checkout name撤销修改:git checkout -- file删除文件:git rm ...
- 了不起的 nodejs-TwitterWeb 案例 bug 解决
了不起的nodejs算是一本不错的入门书,不过书中个别案例存在bug,按照书中源码无法做出和书中相同效果,原本兴奋的心情掺杂着些许失落. 现在我们看一下第七章HTTP,一个Twitter Web客户端 ...
- .Net 大型分布式基础服务架构横向演变概述
一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维及监控. 二. 基础 ...
- PayPal高级工程总监：读完这100篇论文 就能成大数据高手（附论文下载）
100 open source Big Data architecture papers for data professionals. 读完这100篇论文 就能成大数据高手 作者 白宁超 2016年 ...
- ASP.NET Core 中文文档 第四章 MVC（3.7 ）局部视图（partial）
原文:Partial Views 作者:Steve Smith 翻译:张海龙(jiechen).刘怡(AlexLEWIS) 校对:许登洋(Seay).何镇汐.魏美娟(初见) ASP.NET Core ...
- 调用微信退款接口或发红包接口时出现System.Security.Cryptography.CryptographicException: 出现了内部错误 解决办法
我总结了一下出现证书无法加载的原因有以下三个 1.证书密码不正确,微信证书密码就是商户号 解决办法:请检查证书密码是不是和商户号一致 2.IIS设置错误,未加载用户配置文件 解决办法:找到网站使用的应 ...
- Java compiler level does not match解决方法
从别的地方导入一个项目的时候,经常会遇到eclipse/Myeclipse报Description Resource Path Location Type Java compiler level d ...