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规范(推荐 - 阮一峰写的) 官方网站 (看半天,不 ...

随机推荐

CentOS 8 安装Nginx
安装命令: dnf install nginx -y 这就安装完成了 ,对你没看错一个命令就已经把nginx安装好了,不信你通过 nginx -V 命令查看. 常用操作: 1.nginx配置文件目录 ...
设计模式——从HttpServletRequestWrapper了解装饰者模式
从一个业务开始最近项目上紧急需要,为了应付一个不知道啥的安全检测,我们要给系统追加防XSS注入的功能,这里有经验的JavaWeb开发就会想到,用过滤器或者基于项目框架的拦截器来做,但是顺着这个思路下 ...
Plugin 插件体系
Solon 的插件也可以叫扩展组件,相当于Spring 的 starter.Solon已经提供了大量的基础插件,但对第三方的框架适配目前较少. 插件说明 boot插件:: 说明 org.noear: ...
JustAuth 1.15.9 版发布，支持飞书、喜马拉雅、企业微信网页登录
新增修复并正式启用飞书平台的第三方登录 AuthToken 类中新增 refreshTokenExpireIn 记录 refresh token 的有效期 PR 合并 Github #101:支 ...
NVL函数：空值转换函数
NVL(表达式1,表达式2) 如果表达式1为空值,NVL返回值为表达式2的值,否则返回表达式1的值. 该函数的目的是把一个空值(null)转换成一个实际的值.其表达式的值可以是数字型.字符型和日期型. ...
杭电OJ----1097：一个难题（c++）
问题描述 lcy给feng5166,lwg,JGShining和Ignatius带来了一个难题:给了a和b,如何知道a ^ b.每个人都反对这个BT问题,所以lcy使问题比开始容易. 这个难题描述了: ...
Head First 设计模式 —— 08. 外观 (Facade) 模式
思考题想想看,你在 JavaAPI 中遇到过哪些外观,你还希望 Java 能够新增哪些外观? P262 println.log 日志接口.JDBC 接口突然让想感觉想不出来,各种 API 都用得挺 ...
navicat for mysql 破解版
Navicat for MySQL下载地址:Navicat for MySQL 软件和破解程序第1步.安装Navicat软件,最后点击完成第2步.安装成功之后还要进行破解.点击patchNavic ...
实现Vue的多页签组件
在之前的博客中关于vue的多页面标签功能,对于嵌套router-view缓存的最终无奈解决方法有写过vue的多页签功能的解决方案可以看到我当时那个多页签的组件还是比较简单的,只有打开跟关闭 ...
k8s之RBAC授权模式
导读上一篇说了k8s的授权管理,这一篇就来详细看一下RBAC授权模式的使用 RBAC授权模式基于角色的访问控制,启用此模式,需要在API Server的启动参数上添加如下配置,(k8s默然采用此授 ...