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 ...
随机推荐
- SmartAssembly批处理用法
在SmartAssembly.exe根目录有个SmartAssembly.com . 在命令行执行SmartAssembly.com就能看到所有的命令参数了. 用SmartAssembly.exe建好 ...
- input输入框type设置为number，maxlength无效
一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...
- Python数据分析之Pandas操作大全
从头到尾都是手码的,文中的所有示例也都是在Pycharm中运行过的,自己整理笔记的最大好处在于可以按照自己的思路来构建矿建,等到将来在需要的时候能够以最快的速度看懂并应用=_= 注:为方便表述,本章设 ...
- kaggle赛题Digit Recognizer：利用TensorFlow搭建神经网络（附上K邻近算法模型预测）
一.前言 kaggle上有传统的手写数字识别mnist的赛题,通过分类算法,将图片数据进行识别.mnist数据集里面,包含了42000张手写数字0到9的图片,每张图片为28*28=784的像素,所以整 ...
- Maven____笔记摘抄
1 1.maven的作用 i.增加第三方Jar (spring-context.jar spring-aop.jar ....) ii.jar包之间的依赖关系 (spring-context.jar ...
- 七、SXSSFWorkbook生成大excle，避免内存溢出
1.SXSSFWorkbook理解: SXSSFWorkbook是用来生成海量excel数据文件,主要原理是借助临时存储空间生成excel,SXSSFWorkbook专门处理大数据,对于大型excel ...
- 栈结构Stack
package seday12; import java.util.Deque; import java.util.LinkedList; /** * @author xingsir * 栈结构. 栈 ...
- Python第五十一天 python2升级为python3
Python第五十一天 python2升级为python3 公司使用的生产环境系统是centos7,所以这里以centos7系统为基础,讲解将python2升级为python3的方法 centos7 ...
- MySQL更改默认的root账户密码
编辑mysql的配置文件:my.ini(在MySql安装目录下). 打开配置文件,在文件最后一行添加:skip-grant-tables,然后保存退出 意思为就是在启mysql时不启动grant-ta ...
- java基础课程笔记 static 主函数 静态工具类 classpath java文档注释 静态代码块 对象初始化过程 设计模式 继承 子父类中的函数 继承中的构造函数 对象转型 多态 封装 抽象类 final 接口 包 jar包
Static那些事儿 Static关键字 被static修饰的变量成为静态变量(类变量) 作用:是一个修饰符,用于修饰成员(成员变量,成员方法) 1.被static修饰后的成员变量只有一份 2.当成员 ...