编写目的

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编写简单的前端应用的更多相关文章

  1. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  2. vue-cli安装以及创建一个简单的项目(一)(Node\npm\webpack简单使用)

    1.关系介绍 1.简单的说 Node.js 就是运行在服务端的 JavaScript. 2.NPM是随同NodeJS一起安装的包管理工具(新版的nodejs已经集成了npm),能解决NodeJS代码部 ...

  3. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  4. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

  7. jQuery结合Ajax实现简单的前端验证和服务端查询

    上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...

  8. 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程

    原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...

  9. 走向Node与Webpack 之路 - CommonJS 模块化

    走向Node与Webpack 之路 - CommonJS 模块化 1. 参考资料 JavaScript 标准参考教程(alpha) CommonJS规范(推荐 - 阮一峰写的) 官方网站 (看半天,不 ...

随机推荐

  1. Linux USB子系统（一）—— USB设备基础概念

    一.基础概念 在终端用户看来,USB设备为主机提供了多种多样的附加功能,如文件传输,声音播放等,但对USB主机来说,它与所有USB设备的接口都是一致的.一个USB设备由3个功能模块组成:USB总线接口 ...

  2. .NET 云原生架构师训练营（模块二 基础巩固 MongoDB 介绍和基础）--学习笔记

    2.5.1 MongoDB -- 介绍 mysql vs mongo 快速开始 mysql vs mongo 对比 mysql mongo 数据存储 table 二维表结构,需要预先定义结构 json ...

  3. Spark MLlib中KMeans聚类算法的解析和应用

    聚类算法是机器学习中的一种无监督学习算法,它在数据科学领域应用场景很广泛,比如基于用户购买行为.兴趣等来构建推荐系统. 核心思想可以理解为,在给定的数据集中(数据集中的每个元素有可被观察的n个属性), ...

  4. 2021年了，C 语言会被淘汰吗？

    一年365天,总有那么几百天听到有人说"C语言过时了""C语言要被时代淘汰了",那么真的会被淘汰吗? C 语言发布于 1972 年,到2021年已经有49年的历 ...

  5. 关于Objects类的getClass方法为什么可以得到子类的地址的思考

    这一段时间,总是很纠结为什么Objects中的getClass方法可以返回包含子类地址信息的东西(我不确定返回值类型). 因为在Java中,我们定义的父类,我想破脑袋也想不出怎么可以得到子类的信息. ...

  6. memcached的安装教程

    在windows系统上安装memcached 下载安装软件memcached-1.2.6-win32-bin.zip 解压该文件把memcached.exe 拷贝到你的 apache同一目录 安装该m ...

  7. 使用sublime text3搭建Python编辑环境

    最近在工作遇到一个难题. 我所在的测试组有一套PC软件前端自动化工程,在进行自动化测试时,需要在一台古老的xp机器上运行,但这台古老的xp机器带给我诸多烦恼,特别是使用Pycharm编辑器时,我遇到了 ...

  8. 【项目实践】一文带你搞定Session和JWT的登录认证方式

    以项目驱动学习,以实践检验真知 前言 登录认证,估计是所有系统中最常见的功能了,并且也是最基础.最重要的功能.为了做好这一块而诞生了许多安全框架,比如最常见的Shiro.Spring Security ...

  9. 记一次Goroutine与wg导致的问题

    前言 今天发现了一个问题是之前一直没有注意到的,这里记一下 正文 Send Closed Chan 问题概述 代码逻辑是启动时启动多个 channel, channel1 获取数据监听数据处理后发送给 ...

  10. HDU6375双端队列

    要点分析: 1.本题可以使用C++STL中的deque双端队列来方便解决(底层是一个双向的链表) 2.值得注意的是N的上限为150000,所以直接开这么大的空间会超内存,可以配合map一起使用 关于双 ...