nodejs，webpack安装以及初步运用
nodejs安装：
1.下载：https://nodejs.org/en/download/
2.安装node-v6.11.3-x64.msi文件，直接默认安装（next……）；
3.验证是否完成安装：cmd 进入后输入命令 node -v 回车能得到nodejs版本号；
输入node 回车再输入console.log('aaaaa') 回车能正常显示输出。
这表示nodejs安装成功。
webpack安装：
1.npm安装：在f盘新建文件夹webpack，在webpack文件夹建文件夹demo01；
shilt+右键打开命令窗口，在命令窗口输入npm install -g webpack，等待安装完毕；
在命令窗口输入webpack -h 查看安装的版本，恭喜你安装成功。
2.接下来就是写一个webpack配置文件
在demo01文件夹新建webpack.config.js文件
module.exports = {
entry: "./main.js",//入口文件，类似APP根文件
output: {//出口文件
filename: 'bundle.js'
}
}
webpack.config.js
实例：在demo01文件夹新建index.html，main.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
</body>
</html>
index.html
document.write("Hello world")
main.js
在命令窗口输入webpack，会自动生成bundle.js文件
3.安装服务器
在命令窗口输入npm install live-server -g
安装好后启动服务器：在命令窗口输入live-server
/*或者安装webpack-dev-servera. npm install webpack-dev-server --save-dev
可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含webpack-dev-server及其依赖包），也可全局安装（加-g 必须sudo）
b. 在webpack.config.js中添加配置
var webpack=require('webpack');
module.exports = {
……
devServer: {
historyApiFallback: true,
inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
},
plugins:[
……
new webpack.HotModuleReplacementPlugin()
]
……
};
c.在package.json里配置运行的命令（npm支持自定义一些命令）
"scripts":
{
"start": "webpack-dev-server --inline"//注意：不写--hot，否则浏览器无法自动更新
},
d. 运行server
npm start- Error: .........（此处省略一堆错误）
- 解决：在本项目中安装webpack：（不加-g，在项目根目录出现node_modules文件夹，内含webpack及其依赖包）
npm install webpack
- 浏览器打开http://localhost:8080/
成功运行，且修改app中的js代码，浏览器会自动刷新！成功！*/
启动后会自动打开浏览器
webpack初步运用算是完成了。
nodejs，webpack安装以及初步运用的更多相关文章
- 【JavaScript】 Webpack安装及文件打包
背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
- 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js
目的: 模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...
- webpack前端构建工具学习总结（一）之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- 使用vue-cli创建项目（包含npm和cnpm的安装nodejs的安装）
转:http://www.cnblogs.com/wisewrong/p/6255817.html vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue ...
- webpack安装，常见问题和基本插件使用
一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...
- 【原】nodejs全局安装和本地安装的区别
来微信支付有2年多了,从2年前的互联网模式转变为O2O模式,主要的场景是跟线下的商户去打交道,不像以往的互联网模式,有产品经理提需求,我们帮忙去解决问题. 转型后是这样的,团队成员更多需要去寻找业务的 ...
- webpack安装配置使用教程详解
webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...
- webpack安装配置
webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...
- Nodejs的安装配置及如何在sublimetext2中运行js
Nodejs的安装配置及如何在sublimetext2中运行js听语音 | 浏览:4554 | 更新:2015-06-16 11:29 Nodejs的安装配置及如何在sublimetext2中运行js ...
随机推荐
- 商品呢拖拽到购物车，appendChild的剪切功能
今天来到了妙味课堂的html5课程的第2张的第8节,讲的是把商品拖拽到购物车的演示.其中有一个关于appendChild的使用,,每次拖拽都会触发这个方法,但是每次之后,却还是只有一个总价,好吧,说不 ...
- php学习之始于html——div布局与css控制
关于您的问题:xampp是一个集成的php开发环境,里面包含Apache,mysql等环境,主要充当一个服务器的角色, 其中有文件,数据,路径等,一个网站程序安装之后,都会有一个根目录,根目录下,有其 ...
- Java面向对象编程 -3.2
使用this调用本类方法 除了调用属性之外,this也可以实现方法的调用,但是对于方法的调用就必须考虑构造与普通方法 构造方法调用(this()):使用关键字new实例化对象的时候才会调用构造方法: ...
- 【洛谷P3500】TES-Intelligence Test
前言 先是这位神仙写了这道题 \(O(n\log n)\) 的做法.然后去他的博客上恰了一波. 然后发现这道题有 \(O(n)\) 的做法的.其实也不难. 题目 题目链接:https://www.lu ...
- 【PAT甲级】1048 Find Coins (25 分)（二分）
题意: 输入两个正整数N和M(N<=10000,M<=1000),然后输入N个正整数(<=500),输出两个数字和恰好等于M的两个数(小的数字尽可能小且输出在前),如果没有输出&qu ...
- 在visual studio中快速添加代码段
昨天我在网课上,看到老师输入#2之后,立马就出现了一堆代码. 我于是赶紧打开自己的visual studio尝试一下,并没有任何反应. 上网查找,发现visual studio有自定义代码段的功能. ...
- Python 基础之正则之二 匹配分组,正则相关函数及表达式修饰符
四.匹配分组 [元字符] 分组符号 a|b 匹配字符a 或 字符b (如果两个当中有重合部分,把更长的那个放前面) (ab) 匹配括号内的表达式 ,将()作为一个分组 num 引用分组 ...
- JavaScript - 编译性还是解释性？
疑问 在JS的变量和声明式函数的提升看到了"预编译/预处理/预解释"中"预编译"这个字眼,产生了一个疑问:JS是熟知的解释性语言,但JS能被编译吗? 参考 ht ...
- 解决：Field xxMapper in xx.service.impl.xxServiceImpl required a bean of type 'xx.mapper.xxMapper'
1.启动 SpringBoot项目报错,使用的是Springboot.Spring.Mybatis连接Mysql数据库,启动SpringBoot项目报错,错误如下所示: _____ .__/\ .__ ...
- Servlet 学习（四）
HTTP 响应的构成1.HTTP 响应行: 协议.状态.描述 HTTP 1.1 中定义的状态代码 100-199 是信息性代码,标示客户应该采取的其它动作 200-299 表示请求成功 300-399 ...