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-server
a. 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安装以及初步运用的更多相关文章

  1. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  2. 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  3. webpack前端构建工具学习总结（一）之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  4. 使用vue-cli创建项目（包含npm和cnpm的安装nodejs的安装）

    转:http://www.cnblogs.com/wisewrong/p/6255817.html vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue ...

  5. webpack安装，常见问题和基本插件使用

    一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...

  6. 【原】nodejs全局安装和本地安装的区别

    来微信支付有2年多了,从2年前的互联网模式转变为O2O模式,主要的场景是跟线下的商户去打交道,不像以往的互联网模式,有产品经理提需求,我们帮忙去解决问题. 转型后是这样的,团队成员更多需要去寻找业务的 ...

  7. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  8. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

  9. Nodejs的安装配置及如何在sublimetext2中运行js

    Nodejs的安装配置及如何在sublimetext2中运行js听语音 | 浏览:4554 | 更新:2015-06-16 11:29 Nodejs的安装配置及如何在sublimetext2中运行js ...

随机推荐

  1. python的组合数据

    python的组合数据包括:1.列表list[   ] 2.元组tuple(),3.字典dict{"x":"y"},4.集合set{} 1.创造组合数据:均可直 ...

  2. Pandas——数据处理对象

    Pandas中的数据结构 Series: 一维数组,类似于Python中的基本数据结构list,区别是Series只允许存储相同的数据类型,这样可以更有效的使用内存,提高运算效率.就像数据库中的列数据 ...

  3. vue下canvas绘制矩形

    起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...

  4. php环境一键升级脚本

    因为要解析PHP页面需要配置相应的PHP环境,而系统本身的php版本又大多不合适.网上那种一键lamp和lnmp的脚本很多,但是这样一来自己能够定制的空间则少了.所以我自己编写了个门用于安装php环境 ...

  5. LinkQueue(链队)

    今天学习了队列,因为前面写了好几个链表实现的数据结构基本上都懂了,然后大致了解了一下队列的特点,便决定用自己的理解来实现一个,然后实现了. (2018-02-14 代码更新) Head file: # ...

  6. 前端学习 之 JavaScript DOM 与 BOM

    一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...

  7. SVM总结（参考源码ml.hpp）

    如何使用,请查阅我的另一篇博客——SVM的使用 1.setType() SVM的类型,默认SVM::C_SVC.具体有C_SVC=100,NU_SVC=101,ONE_CLASS=102,EPS_SV ...

  8. Android开发：界面设计之六大layouts介绍

    1.帧布局 FrameLayout: FrameLayout是最简单的布局对象.在它里面的的所有显示对象都将固定在屏幕的左上角,不能指定位置,后一个会直接覆盖在前一个之上显示 因为上面的一段话这个是在 ...

  9. Linux centosVMware Nginx安装、 默认虚拟主机、Nginx用户认证、Nginx域名重定向

    一. Nginx安装 cd /usr/local/src wget http://nginx.org/download/nginx-1.12.1.tar.gz 版本在http://nginx.org/ ...

  10. 「Luogu4556」Vani有约会-雨天的尾巴

    「Luogu4556」Vani有约会-雨天的尾巴 传送门 很显然可以考虑树上差分+桶,每次更新一条链就是把这条链上的点在桶对应位置打上 \(1\) 的标记, 最后对每个点取桶中非零值的位置作为答案即可 ...