Node 使用webpack编写简单的前端应用
编写目的
1. 使用 Node 依赖webpack、jQuery编写简单的前端应用。
操作步骤
(1)新建一个目录
$ mkdir simple-app-demo
$ cd simple-app-demo
(2)在该目录下,新建一个package.json
文件。
$ npm init -y
package.json
是项目的配置文件。
(3)安装jquery
、webpack
、webpack-cli
这三个模块。
$ npm install -S jquery
$ npm install -S webpack webpack-cli
打开package.json
文件,会发现jquery
、webpack
和webpack-cli
都加入了dependencies
字段,并且带有版本号。
(4)在项目根目录下,新建一个网页文件index.html
。
<html>
<body>
<h1>Hello World</h1>
<script src="bundle.js"></script>
</body>
</html>
(5)在项目根目录下,新建一个脚本文件app.js
。
const $ = require('jquery');
$('h1').css({ color: 'red'});
上面代码中,require
方法是 Node 特有的模块加载命令。
(6)打开package.json
,在scripts
字段里面,添加一行。
"scripts": {
"build": "webpack --mode production ./app.js -o ./bundle.js",
"test": "...."
},
(7) 在项目根目录下,执行下面的命令,将脚本打包。
$ npm run build
执行完成,可以发现项目根目录下,新生成了一个文件bundle.js
。
(8)浏览器打开index.html
,可以发现Hello World
变成了红色。
修改代码重新编译
1. 修改代码样式后,重新编译生成打包文件即可。
Node 使用webpack编写简单的前端应用的更多相关文章
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- vue-cli安装以及创建一个简单的项目(一)(Node\npm\webpack简单使用)
1.关系介绍 1.简单的说 Node.js 就是运行在服务端的 JavaScript. 2.NPM是随同NodeJS一起安装的包管理工具(新版的nodejs已经集成了npm),能解决NodeJS代码部 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- 使用webpack+vue.js构建前端工程化
参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
- jQuery结合Ajax实现简单的前端验证和服务端查询
上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...
- 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程
原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...
- 走向Node与Webpack 之路 - CommonJS 模块化
走向Node与Webpack 之路 - CommonJS 模块化 1. 参考资料 JavaScript 标准参考教程(alpha) CommonJS规范(推荐 - 阮一峰写的) 官方网站 (看半天,不 ...
随机推荐
- [LeetCode]654. Maximum Binary Tree最大堆二叉树
每次找到数组中的最大值,然后递归的构建左右树 public TreeNode constructMaximumBinaryTree(int[] nums) { if (nums.length==0) ...
- Q227 Basic Calculator II
/* 看的答案,设置一个符号变量记录这个数前边的符号是什么,不同的符号进行不同的操作.这点自己想到了. 没想到的是由于乘除相当于一个优先级高的线程,所以要先处理,还有存取前一个乘数或者分子,应该怎么办 ...
- centos7下mysql安装与卸载
彻底卸载mysql 一.chak 是否有安装mysql a) rpm -qa | grep -i mysql // 查看命令1 b) yum list install mysql* ...
- java面向对象的一些知识
(1)this和super关键字的用法 this表示调用本类实例方法和成员变量,this引用就是对一个对象的引用,如this.name 表示本类成员变量name,静态方法中不能使用this关键字. ...
- .NET 云原生架构师训练营(模块二 基础巩固 RabbitMQ HelloWorld)--学习笔记
2.6.3 RabbitMQ -- HelloWorld 发送端 接收端 rabbitmq container 发送信息 https://www.rabbitmq.com/tutorials/tuto ...
- mysql 应用 持续更新2 转载
作者:彼岸Queen旅行链接:https://www.zhihu.com/question/27334963/answer/266624031来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...
- tomcat控制台运行窗口中文乱码
启动tomcat时出来的运行窗口中文乱码, 如图所示:看得有点不舒服 解决方法:找到Tomcat安装路径下的 /conf/logging.properties 文件 文件末尾添加语句: java.ut ...
- 【RAC】运行root.sh的时候报错root.sh Oracle CRS stack is already configured and will be running under init(1M)
环境:oracle10g 系统:CentOS6.4 开始的时候,在节点1上运行root.sh发现出现90s 的时候hang住了,结束掉,结局完事后,再次运行root.sh报错 WARNING: dir ...
- 利用sql_tuning_Advisor调优sql
1.赋权给调优用户 grant ADVISOR to xxxxxx; 2.创建调优任务 使用sql_text创建 DECLARE my_task_name VARCHAR2 (30); my_sqlt ...
- fsutil比较有用的几个命令
Fsutil:fsinfo 主要由专业支持者使用.列出所有驱动器,查询驱动器类型,查询卷信息,查询特定的 卷信息或文件系统统计信息. 语法参数 drives 列出计算机中所有的驱动器. drivety ...